根據收音機的值選擇要顯示的選項列表

我想根據單選按鈕的值僅顯示選擇中的某些選項。當我從數據庫中檢索數據時（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將不勝感激。

在此先感謝。

來源

2014-07-07 Aknorw

是的_Javascript/jquery將不勝感激._向我們展示一些。 – Satpal

我用3個不同的div試用這個代碼： 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個變量。 – Aknorw

你可以試試這個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

來源

2014-07-07 11:02:00

感謝您的關注。但是在你的代碼中，不幸的是，所有的選項都顯示出來了。 – Aknorw

@Aknorw，你的意思是當頁面加載所有選項可見？然後在這種情況下，您需要預先選擇單選按鈕並顯示相應的選項。 –

當沒有收音機被選中時，我想要禁用選擇，然後根據單選按鈕的值只顯示幾個選項。 – Aknorw

您的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

來源

2014-07-07 11:12:51

根據收音機的值選擇要顯示的選項列表

回答

相關問題