Question

我有一个动态的选择菜单

<select id="mymenu">
  <option >select your choice</option>
  <option value="1">value 1</option>
  <option value="2">value 2</option>
  <option value="3">value 3</option>
  <option value="4">value 4</option>
</select>

我给的身份证。但是当我通过ajax点击按钮加载页面后，这个选择菜单就会出现。我需要默认选择第二个选项/第三个选项

以下代码对我来说不起作用，因为它是动态的

$( document ).ready(function() {
    $('#mymenu').find('option:eq(1)').attr('selected', true);
  });

如何动态选择第一个选项

Answer 1

.ready函数仅在页面加载时触发 - 您希望它在后台持续运行，并触发对DOM的任何更改;这不会发生。您需要做的是在页面加载后再次调用您的函数。

Answer 2

当前场景的一个更复杂的解决方案是将事件侦听器附加到DOM并检查插入到页面上的元素。检测到必需元素后，触发对其执行操作。

实际上，这个解决方案并不适用于当前的示例，但有人可能需要这样做来做更复杂的事情：

// Listen for inserted nodes, checking if its needed one 
// and triggering needed action
$(document).bind('DOMNodeInserted', function(event) {
    var elm = $(event.target);
    if (elm.attr('id') == 'mymenu') {
        elm.find('option:eq(1)').attr('selected', true);
    }
});

// create select box
var select = $('<select>').attr('id', 'mymenu');
var option = $('<option>');
var option_values = {
    0: 'select your choice',
    1: 'value 1',
    2: 'value 2',
    3: 'value 3',
    4: 'value 4'
};
$.each(option_values, function(key, val) {
    $(select).append(option.clone(true).val(key).text(val));
});

// insert select box into DOM
$(document.body).append(select);

http://jsfiddle.net/dnGEL/

选择动态选择菜单中的第一个元素

2 个答案: