0

私はこのリンクをチェックしましたIDに基づいてjqueryでラジオボタンを「チェック済み」に設定しますしかし、私にはあまり適していないようです。これは私のコードです

<label for="basic" class="basic">Gender:</label>
<fieldset data-type="horizontal" data-role="controlgroup" data-mini="true">
    <input type="radio" name="gender" id="radio-mini-1" value="Male" checked="checked" />
    <label for="radio-mini-1">Male</label>

    <input type="radio" name="gender" id="radio-mini-3" value="Female"  />
    <label for="radio-mini-3">Female</label>
</fieldset>

と

<label for="select-choice-min" class="select">Living Place:</label>
<select name="select-choice-min" id="livingPlace" data-mini="true">
    <optgroup label="AAA">
    <option value="123">123</option>
    <option value="456">456</option>
    </optgroup>

    <optgroup label="BBB">
    <option value="789">789</option>
    <option value="246">246</option>
    </optgroup>
</select>

デフォルト値の設定方法を教えてください。ありがとう。

私のjsonの戻り値は次のようなものです:

[{"data":{"id":"8","livingPlace":"789","gender":"Female"}}]

更新 リビングプレイスについては、使用すると実際にセレクターで値を取得できることがわかりまし$("#livingPlace").val(data[0].data.livingPlace);た。セレクターをクリックすると、正しい値が表示されますが、ページが読み込まれると、セレクターをクリックせずに、セレクターの最初の値、つまり上記の例では 123 を表示するだけです。

        $.getJSON('http://mydomain.com/getmyDetail.php?user_name='+localUsername+'&role='+localRole+'&jsoncallback=?', function(data) { // the javascripts are located here

        $('#livingPlace').val(data[0].data.livingPlace).find('[value="' + data[0].data.livingPlace + '"]').attr('selected', 'selected');}

このようにしましたが、何か問題はありますか？

4

1 に答える 1

1

selectの設定は、jQueryでの入力と同じです。

$('#livingPlace').val(789); // select menu is easy

ラジオボタンはもう少し冗長です。

$('input[name="gender"][value="Female"]').attr('checked', 'checked');

その長いセレクターについて説明しましょう。

input-<input>タグを探します

[name="gender"]-属性"name"が"gender"に設定されているタグを探します-これは両方のラジオボタンを取得します。

[value = "Female"]-ここで、値がFemaleのラジオボタンに絞り込みます。

「female」ラジオボタンを選択した後、「checked」属性を「checked」に設定します。trueに設定することもできます。ええと、ブラウザは自動的に他のラジオボタンのチェックを外します。

データを入れて、ここに1つの解決策があります：http： //jsfiddle.net/hRqZP/1/

var json = '[{"data":{"id":"8","livingPlace":"789","gender":"Female"}}]';
var data = JSON.parse(json)[0].data; // get 'data' out of json.
$('#livingPlace').val(data.livingPlace); // select menu is easy
$('input[name="gender"][value="' +
      data.gender +
      '"]'
 ).attr('checked', 'checked');

編集：使用しているブラウザがわかりませんが、val（）がオプションに「selected=selected」を設定していないことに気付きました。ただし、Chromeでは正しい値が表示されていました。とにかく、selected = selectedも設定されるように更新しました：http： //jsfiddle.net/hRqZP/2/

var json = '[{"data":{"id":"8","livingPlace":"789","gender":"Female"}}]';
var data = JSON.parse(json)[0].data; // get 'data' out of json.
$('#livingPlace').
    val(data.livingPlace).
    find('[value="' + data.livingPlace + '"]').
        attr('selected', 'selected');
$('input[name="gender"][value="' +
      data.gender +
      '"]'
 ).attr('checked', 'checked');

編集：jQuery.mobileの場合、選択メニューを更新する必要がある場合があります。

$('#livingPlace').
    val(data.livingPlace).
    find('[value="' + data.livingPlace + '"]').
        attr('selected', 'selected').
    end().
    selectmenu('refresh', true);
于 2013-03-22T23:05:47.153 に答える