javascript - Jquery - 添加选定的属性，但值仍为 0

Question

我的 HTML 代码中有大约 5 个选择，并且我有这个 Jquery 代码，它将每个选择中的选项文本与数组中的文本进行比较。

代码有效。每个 select 都有正确的选项，但是当我发送表单时 select 的 val 是 0，它应该是例如 6

$(function() {
  var index = 0;
  var navHrefNames = ['index', 'index', '', '', 'index'];
  $("select").each(function() {
    $(this).children('option').each(function() {
      if ($(this).text() == navHrefNames[index]) {
        $(this).attr('selected', 'selected');
      }
    });
    index++;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select" name="pages"><option value="">Vyberte stránku</option><option value="6">index</option></select>

<select id="select" name="pages"><option value="">Vyberte stránku</option><option value="6">index</option></select>

<select id="select" name="pages"><option value="">Vyberte stránku</option><option value="6">index</option></select>

<select id="select" name="pages"><option value="">Vyberte stránku</option><option value="6">index</option></select>

<select id="select" name="pages"><option value="">Vyberte stránku</option><option value="6">index</option></select>

如何将选项的值设置为正确的值？

Answer 1

在表单元素上设置选定值时，应使用 prop ，而不是attr 。请参阅documentation为什么这种区别很重要。

文档中的相关引用(重点是我的):

Nevertheless, the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does. Therefore, the cross-browser-compatible way to determine if a checkbox is checked is to use the property:

• if ( elem.checked )
• if ( $( elem ).prop( "checked" ) )
• if ( $( elem ).is( ":checked" ) )

The same is true for other dynamic attributes, such as selected and value.

顺便说一句，您的元素 ID 应始终是唯一的。这是 HTML 规范的要求，当这些 ID 不唯一时，您的 jQuery 代码将会以意想不到的方式运行。

$(function() {
  var index = 0;
  var navHrefNames = ['index', 'index', '', '', 'index'];
  $("select").each(function() {
    $(this).children('option').each(function() {
      if ($(this).text() == navHrefNames[index]) {
        $(this).prop('selected', true);
      }
    });
    index++;
  });

  $("select").each(function() {
    $("body").append("<div>" + this.id + ' - ' + $(this).val() + "</div>");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select0" name="pages"><option value="">Vyberte stránku</option><option value="6">index</option></select>

<select id="select1" name="pages"><option value="">Vyberte stránku</option><option value="6">index</option></select>

<select id="select2" name="pages"><option value="">Vyberte stránku</option><option value="6">index</option></select>

<select id="select3" name="pages"><option value="">Vyberte stránku</option><option value="6">index</option></select>

<select id="select4" name="pages"><option value="">Vyberte stránku</option><option value="6">index</option></select>