根据 radios 的值选择要显示的选项列表答案

【问题标题】：Select a list of options to display according to value of radios根据 radios 的值选择要显示的选项列表
【发布时间】：2014-08-27 20:11:38
【问题描述】：

我想根据单选按钮的值在选择中只显示一些选项。当我从数据库 (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 时，仅应显示选项“rv1”和“rv2”（依此类推）。我尝试了不同的解决方案，但不幸的是我没有成功。

Javascript/Jquery 将不胜感激。

提前致谢。

【问题讨论】：

是的 Javascript/Jquery 将不胜感激。 给我们看一些。
我尝试了 3 个不同的 div，里面有一个 select 代码：var n=document.getElementsByName(e.name); document.getElementById('divV').className=(n[0].checked)?'show':'hidden'; document.getElementById('divF').className=(n[1].checked)?'show':'hidden'; document.getElementById('divG').className=(n[2].checked)?'show':'hidden';但是当我在表单中使用 get 方法时，我收到了 3 个变量。

标签： javascript jquery forms select radio

【解决方案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

【讨论】：

感谢您的关注。但不幸的是，在您的代码中，所有选项都显示出来了。
@Aknorw，您的意思是当页面加载所有选项时可见？那么在这种情况下，您需要预先选择单选按钮并显示相应的选项。
我想在没有选择单选时禁用选择，然后根据单选按钮的值只显示几个选项。
@Aknorw，但您在问题中没有提到这一点。无论如何，我已经更新了我的答案，请看看。
当时很抱歉，我以为我提到了。这几乎是用您更新的代码完成的。选择 RF 时如何隐藏 rf 和 rg 选项？

【解决方案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

【讨论】：