Question

我需要在选中特定单选按钮时从下拉列表中选择一个项目。第一个选项应该提供整个列表供选择和选项2＆amp; 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")获取在检查无线电时返回的bolean值。

<强>演示

$(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)
    }
  });
});

<强> DEMO2

$(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>

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

1 个答案: