Question

我的HTML下面有下拉

<select name="sel_id" id="sel_id" multiple="yes">
    <option value="100">CLOSING CLERK - FirstName Last Name</option>
    <option value="101">CLOSING COORDINATOR - FirstName Last Name</option>
    <option value="102">CLOSING CLERK SECOND - FirstName Last Name</option>
    <option value="103">CLOSING CLERK THIRD - FirstName Last Name</option>
</select>

我需要一个jquery选择器来查找一个选项元素（多选框的下拉选项元素），其中包含＆＃34; CLOSING CLERK＆＃34;的精确子字符串。然后我需要在此下拉框中选择特定的option。所以在这里它应该只找到并选择第一个选项元素而不是第三个和第四个选项元素。

请注意，没有必要为上述选项元素订购此订单。

我尝试了下面的jQuery，但没有运气。

$('#sel_id').filter(function (index) {
    return $(this).text().split(' -') === "CLOSING CLERK";
}).attr('selected', 'selected');

Answer 1

选择器不正确，您需要在filter()上使用options。 split()方法返回一个数组，因此使用索引器访问第一个数组元素并进行比较。

此外，使用.prop(key, value)设置selected属性。

jQuery("#sel_id").change(function(event) {
  jQuery(this).find('option').filter(function(index) {
    return $(this).text().split(' - ')[0].trim() === "CLOSING CLERK";
  }).prop('selected', 'selected');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="sel_id" id="sel_id" multiple="yes">
  <option value="100">CLOSING CLERK - FirstName Last Name</option>
  <option value="101">CLOSING COORDINATOR - FirstName Last Name</option>
  <option value="102">CLOSING CLERK SECOND - FirstName Last Name</option>
  <option value="103">CLOSING CLERK THIRD - FirstName Last Name</option>
</select>

Fiddle

Answer 2

＆＃13;

$('#sel_id option').filter(function(index) { 
  return $(this).text().indexOf("CLOSING CLERK -") >= 0 ;})
      .attr('selected', 'selected');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="sel_id" id="sel_id" multiple="yes">

<option value="100">CLOSING CLERK - FirstName Last Name</option>

<option value="101">CLOSING COORDINATOR - FirstName Last Name</option>

<option value="102">CLOSING CLERK SECOND - FirstName Last Name</option>

<option value="103">CLOSING CLERK THIRD - FirstName Last Name</option>

</select>

＆＃13;

使用jQuery的确切子字符串匹配无法按预期工作

2 个答案: