基于单选按钮选择启用 combobox

Question

我有这个单选按钮：

<input type="radio" name="type" id="pie" value="pie" />
<input type="radio" name="type" id="bar" value="bar" /><
<input type="radio" name="type" id="line" value="line" />

我想要一个基于选定单选按钮的 combobox 。

<select id="Xcombo1" class="Xcombo">
<option value = "" >This options should be based on seletec radio</option>
</select>

我已经拥有的一些代码：

$('input:radio[name=type]:checked').val(); // to get selected radio.

我的问题是，如何根据选定的单选按钮获得这些选项？

注意：任何时候我选择了一个不同的单选按钮，这些选项都应该动态改变
干杯。

Answer 1

$("input").click(function(){
 if($(this).attr("checked"))
{
    if(this.id == "pie")
    {
        $("#Xcombo1").html("<option value='1' >1</option><option value='2' >2</option>");
    }
    else if( this.id == "bar")
    {

        $("#Xcombo1").html("<option value='3' >3</option><option value='4' >4</option>");
    }
    else
    {

        $("#Xcombo1").html("<option value='5' >5</option><option value='6' >6</option>");
    }
}
});

检查下面的小提琴

http://jsfiddle.net/quG2S/12/

Answer 2

HTML

<input type="radio" name="type" id="pie" value="pie" />
<input type="radio" name="type" id="bar" value="bar" />
<input type="radio" name="type" id="line" value="line" />

<select id="Xcombo1" class="Xcombo">
   <option value = "pie">Pie</option>
   <option value = "bar">Bar</option>
   <option value = "line">Line</option>
</select>

Javascript

$("input[type='radio']").click(function(){
    $("#Xcombo1 option[value='" + $(this).val() +"']").prop("selected", true);
});

此 function 将 function 绑定到每个单选按钮的单击事件，该单选按钮使用单击的单选按钮的值到 select 适当的选项并设置其 selected 属性

普通演示： http://jsfiddle.net/g82dB/

如果要动态append 元素，可以使用以下脚本。 它检查以确保该选项不存在，然后追加或选择。

$("input[type='radio']").click(function(){
    if($("#Xcombo1 option[value='" + $(this).val() +"']").length ==0){
        var option = $("<option />",{
            "value": $(this).val(),
            "text": $(this).val(),
            "selected": "selected"
        });
        $("#Xcombo1").append(option);
    }else{
        $("#Xcombo1 option[value='" + $(this).val() +"']").prop("selected", true);
    }
});

这适用于以下 HTML：

动态元素示例： http://jsfiddle.net/g82dB/2/

Answer 3

这是一个供您测试的示例，希望我能理解您想要的

HTML：

<label for="pie">PIE</label><input type="radio" name="type" id="pie" value="pie" />
<br />
<label for="bar">BAR</label><input type="radio" name="type" id="bar" value="bar" />
<br />
<label for="line">LINE</label><input type="radio" name="type" id="line" value="line" />
<br />
<br />

<select id="combopie" class="Xcombo" style="display:none;">
    <option value="pie">Pie Options Here</option>
</select>

<select id="combobar" class="Xcombo" style="display:none;">
    <option value="bar">Bar Options Here</option>
</select>

<select id="comboline" class="Xcombo" style="display:none;">
    <option value="line">Line Options Here</option>
</select>

​jQuery：

$(function () {
    $('input[type=\'radio\']').click(function () {
        $('select.Xcombo').hide();
        $('#combo' + $(this).attr('id')).show();                
    });
});​

工作示例

Answer 4

这是一个例子：

$(function() {
    $('input:radio[name=type]').change(function() {
        var radio = $(this);
        // The "change" event can be triggered for an "unselecting" radio button, so we must check it.
        if (radio.is(':checked')) {
            // You may want to do something else
            $('#Xcombo1 option').attr('value', radio.val());
        }            
    });        
});

还有一个jsfiddle： http://jsfiddle.net/wNZHr/

如果您想根据所选单选按钮显示不同的选项，您可以在 javascript 中创建选项，或者您可以直接在 html 中创建所有选项并使用 show/hide 仅显示您想要的选项。