jQuery делает что-то, когда выбранный текст опции содержит X - PullRequest
Новая
       39

jQuery делает что-то, когда выбранный текст опции содержит X

0 голосов
/ 30 ноября 2011

Я хочу что-то сделать, если выбранная опция содержит определенное слово, однако приведенное ниже не работает: 

<select id="coloroption">
 <option value="172">Granite Gray</option>
 <option value="174">Hot Red</option>
 <option value="173">Navy</option>
 <option value="171">Kentucky Green</option>
</select>

$('#coloroption').change(function() {
var message_index = $(this).val();
if (message_index.indexOf('Kentucky') >= 0){
                alert('MINIMUM 12')}
});

Ответы [ 3 ]

5 голосов
/ 30 ноября 2011

Вот правильный рабочий код: 

 $('#coloroption').change(function(e) {
    var sel = $('#coloroption')[0];
    var message_index = sel.options[sel.selectedIndex].text;
    if (message_index.toLowerCase().indexOf('kentucky') >= 0){
            alert('MINIMUM 12')
    }
 });

Просто звоню 

 $('#coloroption').val()

на самом деле даст вам значение параметра, поэтому, если вы хотите использовать его, вам придется сравнить с '171', а не с текстовым значением ....

о, а вот jsFiddle рабочий образец

3 голосов
/ 30 ноября 2011

Вы можете попробовать это: 

if (message_index.toLowerCase().indexOf('kentucky') >= 0){

Строки JavaScript чувствительны к регистру, поэтому «Кентукки» не будет соответствовать «Кентукки».

0 голосов
/ 30 ноября 2011

Полный код:) 

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <select id="coloroption">
    <option>Granite Gray</option>
    <option>Hot Red</option>
    <option>Navy</option>
    <option>Kentucky Green</option>
  </select>
<script>

      $('#coloroption').change(function() {
          var str = "";
          $("select option:selected").each(function () {
              str += $(this).text();
          });

          if (str.toLowerCase().indexOf('kentucky') >= 0){
            alert('MINIMUM 12');
          }
        })
        .trigger('change');
</script>

</body>
</html>
...