如果我选择选择选项单选按钮应该被选中

Question

下面是一些代码当我点击单选按钮选择选项改变，但当我选择选项选中单选但不选中

<select  id="flight_select">

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

<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

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

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

<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">

---

供参考:对于单选按钮，使用change event而不是click event总是更好的，因为即使当您单击选中的单选按钮时，click event也会触发

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">