Элементы раскрывающегося списка содержат подстроку / шаблон: Отключить элемент - PullRequest
Новая
       7

Элементы раскрывающегося списка содержат подстроку / шаблон: Отключить элемент

1 голос
/ 31 мая 2019

У меня есть выпадающий список и параметры, как описано ниже.

Если я попытаюсь нажать / выбрать «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 + ', ');
}
});

});

UPDATE: Обновлен с рабочим кодом, но нужно больше рекомендаций.

ПРОБЛЕМА: Получил 3 варианта в optgroup "" СДЕЛАЙТЕ ВЫБОР ", как показано ниже 

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 = "В противном случае выберите один или несколько" необходимо отобразить одно или несколько значений как: 

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

Ответы [ 2 ]

1 голос
/ 31 мая 2019

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

Это также возможно при использовании простого API DOM: 

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

Ссылки:

1 голос
/ 31 мая 2019

У вас правильная идея.Измените строку disablefor на приведенный ниже, так как это искомая подстрока: 

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

Используйте метод include для проверки подстроки: 

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