javascript - 如何通过我的自定义值在 HTML 中设置 SELECT OPTION？

Question

我有一个包含一些选项的选择字段。现在我需要使用 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>

我试图用标签来做到这一点，但这不起作用。

请告诉我其他方式。

提前致谢

标签： javascripthtml

Answer 1

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

例子：

$('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>