Question

我想根据单选按钮的值仅在选择中显示一些选项。当我从数据库（MYSQL PDO）检索数据时，我将简化我的代码。

<input type="radio" name="type_rapport" value="v" id="r_v" /><label for="r_v">RV</label>
<input type="radio" name="type_rapport" value="f" id="r_f" /><label for="r_f">RF</label>
<input type="radio" name="type_rapport" value="g" id="r_g" /><label for="r_g">RG</label>

<select>
    <option value="rv1">RV1</option>
    <option value="rv2">RV2</option>
    <option value="rf1">RF1</option>
    <option value="rf2">RF2</option>
    <option value="rg1">RG1</option>
    <option value="rg2">RG2</option>
</select>

选择RV时，只有选项＆＃34; rv1＆＃34;和＆＃34; rv2＆＃34;应该显示（等等）。我尝试了不同的解决方案，但不幸的是我没有成功。

Javascript / Jquery将不胜感激。

提前致谢。

Answer 1

你可以尝试这个jQuery：

$(function(){
     $('select').prop('disabled',true);//disable select box    
    $('[name=type_rapport]').change(function(){
     $('select').removeProp('disabled'); // enable select box
     var valueRadio = $(this).val();
     $('select option').hide();
     $('select option[value^="r'+valueRadio+'"]').show();
        $('select option[value^="r'+valueRadio+'"]:first').prop('selected',true);
    });
  });

<强> Working Demo

Answer 2

你的jquery

$('.rd').on('change',function(){
  var last='r'+$(this).val();

  $('select > option').hide();
  $('select > option[value^="'+last+'"]').show();
   $("select  option").filter(function () {
        return $(this).attr('value') == last+'1';
    }).attr('selected', true);

});


<input type="radio" name="type_rapport" class="rd" value="v" id="r_v" /><label for="r_v">RV</label>
<input type="radio" name="type_rapport" class="rd" value="f" id="r_f" /><label for="r_f">RF</label>
<input type="radio" name="type_rapport" class="rd" value="g" id="r_g" /><label for="r_g">RG</label>

<select>
    <option value="rv1">RV1</option>
    <option value="rv2">RV2</option>
    <option value="rf1">RF1</option>
    <option value="rf2">RF2</option>
    <option value="rg1">RG1</option>
    <option value="rg2">RG2</option>
</select>

DEMO

DEMO2

根据无线电的值选择要显示的选项列表

2 个答案: