下拉列表元素包含子字符串/模式：禁用元素

Question

我得到了一个下拉列表和选项，如下所述。

如果我尝试单击/选择“POICaption-XX423366 [不要允许选择这个]”，我可以限制该值以供选择。

    <select multiple="multiple" size=20 id="caption_collection">

    <optgroup label="MAKE A CHOICE">
    <option>SHOW ALL ENABLED CAPTIONS</option>
    <option>SHOW ALL DISABLED CAPTIONS</option>
    <option>SHOW ALL LISTED CAPTIONS</option>
    </optgroup>
    <optgroup label="ELSE SELECT ONE OR MULTIPLE">
             <option>ALWCaption-A100104  [ALLOW SELECT HERE]</option>
           <option>ZSDCaption-Z100104  [ALLOW SELECT HERE]</option>
           <option>XCDCaption-S100104  [ALLOW SELECT HERE]</option>
           <option>DCVCaption-Q100104  [ALLOW SELECT HERE]</option>
           <option>ERTCaption-D100104  [ALLOW SELECT HERE]</option>
           <option>BNMCaption-XX223366 [DO NOT ALLOW SELECT FOR THIS]</option>
           <option>XWECaption-XX243356 [DO NOT ALLOW SELECT FOR THIS]</option>
           <option>QWECaption-XX323356 [DO NOT ALLOW SELECT FOR THIS]</option>
           <option>DFGCaption-XX228866 [DO NOT ALLOW SELECT FOR THIS]</option>
           <option>TYUCaption-XX220066 [DO NOT ALLOW SELECT FOR THIS]</option>
           <option>POICaption-XX423366 [DO NOT ALLOW SELECT FOR THIS]</option>
           <option>GHJCaption-D100104  [ALLOW SELECT HERE]</option>
           <option>LKICaption-D100104  [ALLOW SELECT HERE]</option>
           <option>UYTCaption-XX423366 [DO NOT ALLOW SELECT FOR THIS]</option>
           </optgroup>

    </select>
    <br><br>
    <div>
      <textarea id="selected" rows="4" cols="56" readonly></textarea>
    </div>

const needle = '[DO NOT ALLOW SELECT FOR THIS]';
// using jQuery:
$('select option').prop('disabled', function() {
return this.text.includes(needle);
});

$("#caption_collection").change(function() {
$('#selected').html(' ');
$("#caption_collection option:selected").each(function() {
var $this = $(this);
if ($this.length) {
  var selText = $this.text();
   console.log(selText);
  $('#selected').append(selText + ', ');
  //$('#selected').text('Only Captions allowed are:').append(selText + ', ');
}
});

});

更新： 更新了工作代码，但需要更多指导。

问题： 在 optgroup ""MAKE A CHOICE" 下获得 3 个选项，如下所示

SHOW ALL ENABLED CAPTIONS
SHOW ALL DISABLED CAPTIONS
SHOW ALL LISTED CAPTIONS

我想要的是点击每个给我如下所示的值

SHOW ALL ENABLED CAPTIONS
     A100104  ,Z100104  ,S100104  ,Q100104  ,D100104  ,D100104  ,D100104

SHOW ALL DISABLED CAPTIONS
     XX223366  ,XX243356  ,XX323356  ,XX228866  ,XX220066  ,XX423366  ,XX423366

SHOW ALL LISTED CAPTIONS
    XX223366  ,XX243356  ,XX323356  ,XX228866  ,XX220066  ,XX423366  ,XX423366, A100104  ,Z100104  ,S100104  ,Q100104  ,D100104  ,D100104  ,D100104

在 optgroup 下的标签="ELSE SELECT ONE OR MULTIPLE" 需要显示一个或多个值：

A100104  ,Z100104  ,S100104
A100104

虽然我可以提取

var stre = "LKICaption-A100104 [LKI   hfjdlfdlfjl]"
var str2 = stre.split('-');
var strval = str2[str2.length - 1];
alert(strval) // A100104 [LKI   hfjdlfdlfjl] but I need only A100104 

alert(strval.split(' ')[0]) // Worked this way o/p is A100104 

Answer 1

你的想法是对的。将 disablefor 字符串更改为以下内容，因为这是我们要查找的子字符串：

var disablefor= "[DO NOT ALLOW SELECT FOR THIS]";

使用includes方法检查子字符串：

if($thisOption.val().includes(disablefor)) {
    $thisOption.attr("disabled", "disabled");
}

Answer 2

使用jQuery，一个选项如下：

// caching the value to use to identify <options> to disable:
const needle = '[DO NOT ALLOW SELECT FOR THIS]';

// here we retrieve all the (relevant) <option> elements, and
// use the prop() method to update the 'disabled' property for
// each <option>:
$('#jQuery option').prop('disabled', function() {
  // here we use this.text to retrieve the text of the
  // current <option> (the 'this'), and use the
  // String.prototype.includes() method to find out if
  // the String includes the string we're searching for.
  // we return true (if it does) or false (if it does not),
  // this sets the 'disabled' property to the result of
  // the evaluation:
  return this.text.includes(needle);
});

这也可以使用普通的 DOM API：

// caching the value to use to identify <options> to disable:
const needle = '[DO NOT ALLOW SELECT FOR THIS]';

// here we retrieve all the relevant <option> elements,
// and pass that NodeList to NodeList.prototype.forEach():
document.querySelectorAll('#JavaScript option').forEach(

  // using an Arrow function to perform an action on
  // each of the <option> elements (here 'el' is the
  // current node of the NodeList); updating the
  // el.disabled property of each <option> based on
  // whether the el.text property includes the 'needle':
  (el) => el.disabled = el.text.includes(needle)
);

const needle = '[DO NOT ALLOW SELECT FOR THIS]';
// using jQuery:
$('#jQuery option').prop('disabled', function() {
  return this.text.includes(needle);
});

// using plain JavaScript/DOM API:
document.querySelectorAll('#JavaScript option').forEach(
  (el) => el.disabled = el.text.includes(needle)
);

div {
  border: 2px solid #000;
  margin: 1em auto;
  padding: 0.5em;
  border-radius: 1em;
}

div::before {
  content: 'Using ' attr(id) ': ';
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="jQuery">
  <select>
    <option>ALWCaption-A100104 [ALLOW SELECT HERE]</option>
    <option>ZSDCaption-Z100104 [ALLOW SELECT HERE]</option>
    <option>XCDCaption-S100104 [ALLOW SELECT HERE]</option>
    <option>DCVCaption-Q100104 [ALLOW SELECT HERE]</option>
    <option>ERTCaption-D100104 [ALLOW SELECT HERE]</option>
    <option>BNMCaption-XX223366 [DO NOT ALLOW SELECT FOR THIS]</option>
    <option>XWECaption-XX243356 [DO NOT ALLOW SELECT FOR THIS]</option>
    <option>QWECaption-XX323356 [DO NOT ALLOW SELECT FOR THIS]</option>
    <option>DFGCaption-XX228866 [DO NOT ALLOW SELECT FOR THIS]</option>
    <option>TYUCaption-XX220066 [DO NOT ALLOW SELECT FOR THIS]</option>
    <option>POICaption-XX423366 [DO NOT ALLOW SELECT FOR THIS]</option>
    <option>GHJCaption-D100104 [ALLOW SELECT HERE]</option>
    <option>LKICaption-D100104 [ALLOW SELECT HERE]</option>
    <option>UYTCaption-XX423366 [DO NOT ALLOW SELECT FOR THIS]</option>
  </select>
</div>
<div id="JavaScript">
  <select>
    <option>ALWCaption-A100104 [ALLOW SELECT HERE]</option>
    <option>ZSDCaption-Z100104 [ALLOW SELECT HERE]</option>
    <option>XCDCaption-S100104 [ALLOW SELECT HERE]</option>
    <option>DCVCaption-Q100104 [ALLOW SELECT HERE]</option>
    <option>ERTCaption-D100104 [ALLOW SELECT HERE]</option>
    <option>BNMCaption-XX223366 [DO NOT ALLOW SELECT FOR THIS]</option>
    <option>XWECaption-XX243356 [DO NOT ALLOW SELECT FOR THIS]</option>
    <option>QWECaption-XX323356 [DO NOT ALLOW SELECT FOR THIS]</option>
    <option>DFGCaption-XX228866 [DO NOT ALLOW SELECT FOR THIS]</option>
    <option>TYUCaption-XX220066 [DO NOT ALLOW SELECT FOR THIS]</option>
    <option>POICaption-XX423366 [DO NOT ALLOW SELECT FOR THIS]</option>
    <option>GHJCaption-D100104 [ALLOW SELECT HERE]</option>
    <option>LKICaption-D100104 [ALLOW SELECT HERE]</option>
    <option>UYTCaption-XX423366 [DO NOT ALLOW SELECT FOR THIS]</option>
  </select>
</div>

参考资料：

• jQuery:
  • prop()。
• JavaScript：
  • Arrow function syntax。
  • document.querySelectorAll()。
  • HTMLOptionElement。
  • String.prototype.includes()。