如何通过我的自定义值在 HTML 中设置 SELECT OPTION？ [复制]

Posted 2023-03-05

【中文标题】如何通过我的自定义值在 HTML 中设置 SELECT OPTION？ [复制]

【英文标题】：How to set SELECT OPTION in HTML by my custom value? [duplicate]

【发布时间】：2020-03-26 10:02:28

【问题描述】：

我有一个包含一些选项的选择字段。现在我需要使用 jQuery 选择其中一个选项。但是当我只知道必须选择的选项的值时，我该怎么做呢？

我有以下 html：

<div class="id_100">
  <select>
    <option value="val1">Val 1</option>
    <option value="val2">Val 2</option>
    <option value="val3">Val 3</option>
  </select>
</div>

我尝试使用标签来执行此操作，但这不起作用。

请告诉我其他方法。

提前致谢

【问题讨论】：

***.com/questions/13343566/…

$('.id_100 option[value=val2]').prop('selected',true);

这个问题不是与@KiranManiya 指出的可能重复的完全重复吗？

@Edric 是的，代码 sn-p 之前的所有内容都是相同的 - 除了格式。

【参考方案1】：

不确定您是否在询问选择选项的 jQuery 选择器。如果是这种情况，请检查下面的 sn-p。

例子：

$('select option[value="VALUE_YOU_WANT_TO_SELECT"]')

$(document).ready(function() 
  //selects the inner html of the second option tag
  console.log($('.id_100 option[value="val2"]').html());
  //OR
  console.log($('select option[value="val2"]').html());
  //OR only
  console.log($('option[value="val2"]').html());
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="id_100">
  <select>
    <option value="val1">Val 1</option>
    <option value="val2">Val 2</option>
    <option value="val3">Val 3</option>
  </select>
</div>

如果您想将选择更改为特定选项，则可以使用：

$(document).ready(function() 
  //changes selected value to the third one using the value of the jQuery selector of the thir option
  $('select').val($('option[value="val3"]').val());
);

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="id_100">
      <select>
        <option value="val1">Val 1</option>
        <option value="val2">Val 2</option>
        <option value="val3">Val 3</option>
      </select>
    </div>

【参考方案2】：

我很清楚我理解了什么，但我会尝试！

我认为最好的方法是为每个选项添加一个 id 属性，但其值与 value 属性相同：<option value="val1" id="val1">Val 1</option>

因为在此之后，我们可以将您已经知道的值存储在这样的变量中：

var data = "val3"; //or whatever you had 

在 JQuery 中我们可以这样做：$('#'+data).attr('selected', 'selected');

通过这个，我们将 selected 属性添加到我们要选择的元素中，并添加选择的值。

希望这会有所帮助！