CODEWITHSUNDEEP
javascriptjquerycontains
user3782584
user3782584

Reputation: 11

Dropdown list elements contains substring/pattern : Disable element

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

Upvotes: 1

Views: 470

Answers (2)

David Thomas
David Thomas

Reputation: 253328

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:

Upvotes: 1

Anthony
Anthony

Reputation: 71

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

Upvotes: 1

Related Questions