根据下拉选择更改单选按钮的值答案

【问题标题】：Change the values of radio buttons depending on dropdown selection根据下拉选择更改单选按钮的值
【发布时间】：2014-12-27 14:31:53
【问题描述】：

您好，我一直在尝试根据选择的下拉菜单将单选按钮设置为某些值。

首先是select语句：

<select id="department" name="department" class="input-xlarge" onchange="setDefault();">
    <option value="" selected></option>
    <option value="1">Read Only</option>
    <option value="2">HR Staff</option>
    <option value="3">Select 3</option>
    <option value="4">Select 4</option>
    <option value="7">Select 5</option>
</select>

我创建了一个我认为可以设置值的函数，具体取决于所选内容。

<script>
    function setDefault() {
    if (department.val() == '1'){
        alert('One');
    }
    $("#radio-0").prop("checked", true);
</script>

我认为如果部门的 val（选择下拉菜单）等于 1，则设置此值。
我在控制台窗口中得到的错误是
*Uncaught TypeError: undefined is not a function*

我知道这应该很简单，但作为一个 jQuery 新手，我知道我可能犯了一个简单的错误。
总体而言，目标是根据下拉选择将一系列单选按钮设置为特定值。例如，如果选择只读，则某些值将设置为 1、2、3 4 或 5（对于单选按钮）等等，具体取决于下拉选择。

谢谢

【问题讨论】：

我试过了，得到了这个错误：Uncaught ReferenceError: setDefault is not defined
请参阅下面的工作解决方案。

标签： javascript jquery html

【解决方案1】：

使用 jQuery onchange 函数。

$(document).ready(function () {
$("#department").change(function () {
if(this.value=='1')
{
    alert("one");
}
  $("#radio-0").prop("checked", true);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<select id="department" name="department" class="input-xlarge">
                  
  <option value="" selected></option>

  <option value="1">Read Only</option>

  <option value="2">HR Staff</option>

  <option value="3">Select 3</option>

  <option value="4">Select 4</option>

  <option value="7">Select 5</option>

</select>

<input type="radio" id="radio-0">

【讨论】：

谢谢这满足了我的需要！！我不确定是谁反对这个？感谢您的帮助

【解决方案2】：

我建议为此使用 javascript。这是一个很小的请求，您实际上并不需要外部库。

基于您的 HTML，包括一些单选按钮

<select id="department" name="department" class="input-xlarge" onchange="setDefault(this);">
                  <option value="" selected></option>

                    <option value="1">Read Only</option>

                    <option value="2">HR Staff</option>

                    <option value="3">Select 3</option>

                    <option value="4">Select 4</option>

                    <option value="7">Select 5</option>

</select><br />

<input type="radio" name="selectedop" id="radio-1" /><br />
<input type="radio" name="selectedop" id="radio-2" /><br />
<input type="radio" name="selectedop" id="radio-3" /><br />
<input type="radio" name="selectedop" id="radio-4" /><br />
<input type="radio" name="selectedop" id="radio-7" />

然后，您只需在脑海中添加这个 javascript。它通过结合“radio-”和值来根据值选择无线电。

function setDefault(input) {
    document.getElementById("radio-" + input.value).checked = true;
}

JsFiddle 示例：http://jsfiddle.net/bpmf3cks/

【讨论】：

【解决方案3】：

试试

$('#department').on('change',function() {

    if ($(this).val() == '1') alert($(this).val())

})

http://jsfiddle.net/5x0h5g73/1/

【讨论】：