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

我想要一个基于seletected单选按钮的组合框。

<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);
});

此函数将函数绑定到每个单选按钮的单击事件，该单击事件使用单击的单选按钮的值来选择适当的选项并设置其选定的属性。

正常演示：http://jsfiddle.net/g82dB/

如果您想动态附加元素，则可以使用以下脚本。它会检查以确保该选项尚不存在，然后添加或选择。

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

工作example

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仅显示您想要的选项。

根据单选按钮选择启用组合框

4 个答案: