Jquery - 添加选择的属性，但值保持为 0答案

【问题标题】：Jquery - add attr selected, but value remains 0Jquery - 添加选择的属性，但值保持为 0
【发布时间】：2017-08-12 14:25:41
【问题描述】：

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

代码有效。每个选择都有正确的选项，但是当我发送表单时，选择的值是 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>

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

【问题讨论】：

标签： javascript jquery html drop-down-menu

【解决方案1】：

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

来自文档的相关引用（强调我的）：

尽管如此，关于checked 最重要的概念要记住属性是它不对应于checked 属性。这属性实际上对应于 defaultChecked 属性和应该只用于设置复选框的 initial 值。这 checked 属性值不随状态变化复选框，而 checked 属性可以。因此，确定是否选中复选框的跨浏览器兼容方法是使用属性：

if ( elem.checked )

if ( $( elem ).prop( "checked" ) )

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

其他动态属性也是如此，例如selected和 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>

【讨论】：

【解决方案2】：

您需要在if 条件中使用$.inArray()，以下是更新后的代码：

$(function() {
  var index = 0;
  var navHrefNames = ['index', 'index', '', '', 'index'];
  $("select").each(function() {
    $(this).children('option').each(function() {
      if ($.inArray($(this).text(), navHrefNames)) {
        console.log('Something matched...');
        $(this).prop('selected', true);
      } else {
        console.log("Not matching anything in array");
      }
    });
    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>

【讨论】：