更新无法为无线电类型和选择器设置默认值

Question

我已经检查了这个链接Set radio button 'checked' in jquery based on ID 但是，似乎不太适合我。这是我的代码

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

我是这样做的，有什么问题吗？

Answer 1

设置选择就像使用 jQuery 输入一样：

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

您的单选按钮有点冗长：

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

让我解释一下那个长选择器。

input - 查找 标签

[name="gender"] - 查找属性“name”设置为“gender”的标签 - 这会抓取两个单选按钮。

[value="Female"] - 这是我们缩小到值为 Female 的单选按钮的地方。

选择“女性”单选按钮后，我们将“已选中”属性设置为“已选中”。我们也可以将其设置为 true。嗯，浏览器会自动取消选中其他单选按钮。

加上您的数据，这是一种解决方案： 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);