Dropdown list elements contains substring/pattern : Disable element

Question

I got a dropdown list and options, as described below.

If I try to click/select on "POICaption-XX423366 [DONOT ALLOW SELECT FOR THIS]" I am able to restrict this value for selection.

    <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 + ', ');
}
});

});

UPDATE: Updated with working code, but need more guidance.

PROBLEM: Got 3 options under optgroup ""MAKE A CHOICE" as below

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

What i want is clicking on each get me the value as shown below

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

AND under optgroup label="ELSE SELECT ONE OR MULTIPLE" need to display one or more value as :

A100104  ,Z100104  ,S100104
A100104

Though I can extract

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

Possible duplicate of [How to check whether a string contains a substring in JavaScript?](https://stackoverflow.com/questions/1789945/how-to-check-whether-a-string-contains-a-substring-in-javascript) — devlin carnate, May 31 '19 at 16:48

score 1 · Answer 1 · answered May 31 '19 at 16:56

1

You have the right idea. Change the disablefor string to the below, since that is the substring we're looking for:

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

Use the includes method to check for a substring:

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

answered May 31 '19 at 16:56

Anthony

71
1
2

Thanks Anthony. Worked like a charm and exactly I was behind! – user3782584 May 31 '19 at 16:58

score 1 · Answer 2 · answered May 31 '19 at 17:14

With jQuery, one option is as follows:

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

This is also possible using the plain 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>

References:

jQuery:
- prop().
JavaScript:

Thanks David, Works fine for me, another way for looking at requirement. Appreciated your time and guidance. — user3782584, Jun 01 '19 at 09:44
Your question was answered. The guidance you require is a new question, so please ask a new question. — David Thomas, Jun 02 '19 at 08:04

Dropdown list elements contains substring/pattern : Disable element

2 Answers2