单选按钮选项从下拉列表中选择项目

Question

选中特定单选按钮时，我需要从下拉列表中选择一个项目。第一个选项应提供可供选择的整个列表，选项 2 和 3 应在下拉列表中选择/显示各自的项目，而无需单击下拉列表。

我已经尝试了多个 jQuery 选项来解决这个问题，但是它们似乎都不起作用。下面的代码在某些时候似乎可以在 JSFiddle 中运行，但在 CodePen 或我的本地服务器中却不行。我不是从头开始编写 jQuery，所以有什么我可能遗漏或出错的地方吗？

HTML：

<section id="options">
  <input id="option1" name="option" rel="option1" type="radio" value="Option-1">
  <label for="option1">Option 1</label>
  <br>
  <input id="option2" name="option" rel="option2 " type="radio" value="Option-2">
  <label for="option2">Option 2</label>
  <br>
  <input id="option3" name="option" rel="option3" type="radio" value="Option-3">
  <label for="option3">Option 3</label>
</section>

<section>
  <select id="items" name="items">
    <option value="none">Select Item</option>
    <option value="item1">Item 1</option>
    <option value="item2">Item 2</option>
    <option value="item3">Item 3</option>
    <option value="item4">Item 4</option>
  </select>
</section>

JS：

$(document).ready(function () {
    $('input[id="option1"]').change(function() {
        if ($('input[id="option1"]').attr('checked') == "checked") {
        $('#items option:eq(0)').attr('selected', 'selected')
        }
    });
    $('input[id="option2"]').change(function() {
        if ($('input[id="option2"]').attr('checked') == "checked") {
        $('#items option:eq(2)').attr('selected', 'selected')
        }
    });
    $('input[id="option3"]').change(function() {
        if ($('input[id="option3"]').attr('checked') == "checked") {
        $('#items option:eq(3)').attr('selected', 'selected')
        }
    });
});

Answer 1

使用.is(":checked") 获取一个布尔值，如果收音机被选中则返回。

演示

$(document).ready(function() {
  $('input[id="option1"]').change(function() {
    if ($('input[id="option1"]').is(':checked')) {
      $('#items').val("item1")
    }
  });
  $('input[id="option2"]').change(function() {
    if ($('input[id="option2"]').is(':checked')) {
      $('#items').val("item2")
    }
  });
  $('input[id="option3"]').change(function() {
    if ($('input[id="option3"]').is(':checked')) {
      $('#items').val("item3")
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="options">
  <input id="option1" name="option" rel="option1" type="radio" value="Option-1">
  <label for="option1">Option 1</label>
  <br>
  <input id="option2" name="option" rel="option2 " type="radio" value="Option-2">
  <label for="option2">Option 2</label>
  <br>
  <input id="option3" name="option" rel="option3" type="radio" value="Option-3">
  <label for="option3">Option 3</label>
</section>

<section>
  <select id="items" name="items">
    <option value="none">Select Item</option>
    <option value="item1">Item 1</option>
    <option value="item2">Item 2</option>
    <option value="item3">Item 3</option>
    <option value="item4">Item 4</option>
  </select>
</section>

你也可以像这样缩短你的代码：

$(document).ready(function() {
  $('input[id^="option"]').change(function() {
    if ($(this).is(':checked')) {
      var id = $(this).val().replace("Option-", "")
      $('#items').val("item" + id)
    }
  });
});

演示2

$(document).ready(function() {
  $('input[id^="option"]').change(function() {
    if ($(this).is(':checked')) {
      var id = $(this).val().replace("Option-", "")
      $('#items').val("item" + id)
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="options">
  <input id="option1" name="option" rel="option1" type="radio" value="Option-1">
  <label for="option1">Option 1</label>
  <br>
  <input id="option2" name="option" rel="option2 " type="radio" value="Option-2">
  <label for="option2">Option 2</label>
  <br>
  <input id="option3" name="option" rel="option3" type="radio" value="Option-3">
  <label for="option3">Option 3</label>
</section>

<section>
  <select id="items" name="items">
    <option value="none">Select Item</option>
    <option value="item1">Item 1</option>
    <option value="item2">Item 2</option>
    <option value="item3">Item 3</option>
    <option value="item4">Item 4</option>
  </select>
</section>