Question

如何将此JavaScript转换为jQuery？

这样做的目的是自动选择匹配的下拉列表的值。

JS代码：

window.onload = function(){
    document.getElementsByName("title")[0].value="the_title_value";
}

Answer 1

window.onload = function() {
  // document.getElementsByName("title")[0].value="the_title_value";
  // get all items with name "title" and then reduce the result set to the first element and then set the value
  $('[name="title"]').first().val("the_title_value");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select name="title">
  <option value='the_title_value_1'>the_title_value_1</option>
  <option value='the_title_value'>the_title_value</option>
  <option value='the_title_value_3'>the_title_value_3</option>
</select>

Answer 2

$(document).ready(function(){
  $('select[name="title"]').first().val("the_title_value");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<select name="title">
<option value='the_title_value1'>1</option>
<option value='the_title_value'>2</option>
<option value='the_title_valu3'>3</option>
</select>

Answer 3

您可以在:eq函数中使用name和ready选择器来实现这一点，请查看下面的示例。

希望这有帮助。

$(function(){
  $("select[name='title']:eq(0)").val('second');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="title">
  <option value='first'>First 1</option>
  <option value='second'>Second 2</option>
  <option value='third'>Third 3</option>
</select>

Answer 4

您可以按照name属性选择元素，然后在设置当前:first之前获取val()元素，如下所示：

$(window).on('load', function() {   
    $('select[name="title"]:first').val('the_title_value') 
});

Answer 5

    $(document).ready(function(){
      $('[name="title"]').val("the_title_value");
    })

如果页面上有许多名称=“title”的元素，则只需要first（）。你必须将[0]放在vanila javascript中的原因是因为

    document.getElementsByName("title")

返回一个元素数组，即使只有一个元素具有此名称。

如何使用jQuery自动选择下拉列表的值？

5 个答案: