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 で直接作成し、表示/非表示を使用して必要なオプションのみを表示することができます。

于 2012-12-18T09:49:47.317 に答える