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

我有一个下拉列表和选项，如下所述

如果我尝试单击/选择“POICOUNT-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>

更新： 使用工作代码更新，但需要更多指导

问题: 在optgroup“”下获得3个选项，如下所示

我想要的是点击每个按钮，得到如下所示的值

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 label=“ELSE”下选择一个或多个 需要将一个或多个值显示为：

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 

---

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

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

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

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

---

对于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);
});

div{
边框：2倍实心#000；
保证金：1em自动；
填充：0.5em；
边界半径：1米；
}
div：：之前{
内容：'使用'attr（id）''；
显示：块；
}

ALWCaption-A101004[允许在此选择]
ZSDCaption-Z100104[允许在此选择]
XCDCaption-S100104[允许在此选择]
DCVCaption-Q100104[允许在此选择]
ERTCUPTION-D100104[允许在此选择]
BNMCOPTION-XX223366[不允许为此选择]
XWECaption-XX243356[不允许为此选择]
QWECaption-XX323356[不允许为此选择]
DFGCaption-XX228866[不允许为此选择]
TYUCOPTION-XX220066[不允许为此选择]
POICOUNT-XX423366[不允许为此选择]
GHJCaption-D100104[允许在此选择]
LKICATION-D100104[允许在此选择]
UYTCOPTION-XX423366[不允许为此进行选择]
ALWCaption-A101004[允许在此选择]
ZSDCaption-Z100104[允许在此选择]
XCDCaption-S100104[允许在此选择]
DCVCaption-Q100104[允许在此选择]
ERTCUPTION-D100104[允许在此选择]
BNMCOPTION-XX223366[不允许为此选择]
XWECaption-XX243356[不允许为此选择]
QWECaption-XX323356[不允许为此选择]
DFGCaption-XX228866[不允许为此选择]
TYUCOPTION-XX220066[不允许为此选择]
POICOUNT-XX423366[不允许为此选择]
GHJCaption-D100104[允许在此选择]
LKICATION-D100104[允许在此选择]
UYTCOPTION-XX423366[不允许为此进行选择]

Thank Anthony的可能副本。工作很有魅力，我正好落后了！谢谢David，对我来说很好，这是另一种看待需求的方式。感谢您的时间和指导。您的问题得到了回答。您需要的指导是一个新问题，所以请问一个新问题。

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

// 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);
});

// 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)
);