0

我有这个单选按钮：

<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 = "" >This options should be based on seletec radio</option>
</select>

我已经拥有的一些代码：

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

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

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

4

4 回答 4

2 
$("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/

于 2012-12-18T09:59:43.340 回答
1

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/

于 2012-12-18T09:53:07.143 回答
1

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

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

工作示例

于 2012-12-18T10:01:41.753 回答
0

这是一个例子：

$(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来只显示你想要的选项。

于 2012-12-18T09:49:47.317 回答