Question

这里有一些代码当我单击单选按钮选择选项更改，但当我选择选项选择无线电但未选中

<select  id="flight_select">

＆＃13;

$('.select-change').click(function(){ 
    $('#flight_select').val($(this).data('val')).trigger('change');
})

＆＃13;

<select  id="flight_select">        
    <option value="A">Only Fly</option>
    <option value="B">Fly + Bag</option>
    <option value="C">Fly + Bag + Eat</option>
</select>

<input type="radio"  name="flightType" id="only_fly" class="select-change" data-val="A">
<input type="radio" name="flightType" id="fly_bag"  value="fly2" class="select-change" data-val="B">
<input type="radio" name="flightType" id="fly_bag_eat" value="fly3" class="select-change" data-val="C">

Answer 1

您需要附加下拉列表的更改事件，然后根据所选值检查单选按钮。

＆＃13;

$('.select-change').change(function() {
  $('#flight_select').val($(this).data('val'));
});

// attach change event handler
$('#flight_select').change(function() {
  // select radio based on `data-val` attribute
  // and then set the checked property
  $('.select-change[data-val="' + this.value + '"]').prop('checked', true);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="flight_select">
  <option value="A">Only Fly</option>
  <option value="B">Fly + Bag</option>
  <option value="C">Fly + Bag + Eat</option>
</select>

<input type="radio" name="flightType" id="only_fly" class="select-change" data-val="A">
<input type="radio" name="flightType" id="fly_bag" value="fly2" class="select-change" data-val="B">
<input type="radio" name="flightType" id="fly_bag_eat" value="fly3" class="select-change" data-val="C">

＆＃13;

仅供参考：使用更改事件代替单选按钮的单选按钮总是更好，因为即使点击已选中的广播，点击事件也会触发。

Answer 2

您需要在change元素上绑定select事件，.trigger('change')也是多余的。

$('.select-change').click(function() {
  $('#flight_select').val($(this).data('val'));
});

$('#flight_select').change(function() {
  $('.select-change[data-val=' + $(this).val() + ']').prop('checked', true)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="flight_select">
  <option value="A">Only Fly</option>
  <option value="B">Fly + Bag</option>
  <option value="C">Fly + Bag + Eat</option>
</select>

<input type="radio" name="flightType" id="only_fly" class="select-change" data-val="A">
<input type="radio" name="flightType" id="fly_bag" value="fly2" class="select-change" data-val="B">
<input type="radio" name="flightType" id="fly_bag_eat" value="fly3" class="select-change" data-val="C">

如果我选择选择选项单选按钮sholud被选中

2 个答案: