0

Here is my HTML:

<select name="Pcolor" id="image" style="height:30px;">
    <option value="">Избран цвят: Blue/Lt Blue </option>
    <option value="45751303" color-number="0">Black</option>
    <option value="45751343" color-number="1">Black/Pink</option>
    <option value="45751359" color-number="2">Blue/Lt Blue</option>
    <option value="45751324" color-number="3">Dk Purple/Purpl</option>
    <option value="45751390" color-number="4">Ink/Cerise</option>
</select>

Here is my Javascript:

var ColorSelectt = $('#image').find('option[text="Black/Pink"]').attr("color-number");
alert(ColorSelectt);

All what i want to do is to find the option from select menu with id image that have text (not value) Black/Pink for example and then get the value contained in color-number="".

When the alert appears it gives me response undefined, why is that ?

How can i fix it ?

Venelin
  • 2,905
  • 7
  • 53
  • 117

2 Answers2

3

Use :contains content filter to select all elements that contain the specified text.

var ColorSelectt = $('#image option:contains("Grey M/Navy")').attr("color-number");
var ColorSelectt2 = $('#image option:contains("Navy/Grey M")').attr("color-number");

alert(ColorSelectt + ':' + ColorSelectt2);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="Pcolor" id="image" style="height:30px;">
    <option value="">Избран цвят: Blue/Lt Blue </option>
    <option value="45751303" color-number="0">Black</option>
    <option value="45751343" color-number="1">Black/Pink</option>
    <option value="45751359" color-number="2">Blue/Lt Blue</option>
    <option value="45751324" color-number="3">Dk Purple/Purpl</option>
    <option value="45751390" color-number="4">Ink/Cerise</option>
    <option value="45751390" color-number="5">Grey M/Navy</option>
    <option value="45751390" color-number="6">Navy/Grey M</option>
    
</select>
Ruslanas Balčiūnas
  • 7,310
  • 3
  • 24
  • 41
  • This code is not working when there are similar case: If there is one option with text `Grey M/Navy` and after that another with text `Navy/Grey M`. If i target the last one i get the number from `color-number` but if i try to get the first one i get `undefined`. Can you help me about that ? – Venelin May 20 '15 at 12:34
  • I updated the answer with your case. It works as expected. If you need exact match, take a look at this question and answers http://stackoverflow.com/questions/6673777/select-link-by-text-exact-match – Ruslanas Balčiūnas May 20 '15 at 12:56
  • Can you please check this out: http://stackoverflow.com/questions/30350022/jquery-contains-issue-when-trying-to-select-option-menu There is something very strange. Please test it with the code there. Thanks in advace. If it matters i use `` Does it make any difference ? – Venelin May 20 '15 at 13:00
  • Is there anyway so i can skip the first occurrence when i am searching ? – Venelin May 20 '15 at 13:04
  • `$($('#image option:contains(text)')[1]).attr()`. jQuery returns colletion of elements you can use it as an array. – Ruslanas Balčiūnas May 20 '15 at 13:08
0

TRy:

    var ColorSelectt = $('#image').find('option:contains("Black/Pink")').attr("color-number");
    alert(ColorSelectt);

jsfiddle: https://jsfiddle.net/cw6knsc5/

or :

 var ColorSelectt = $('#image option:contains("Black/Pink")').attr("color-number");
    alert(ColorSelectt);
madalinivascu
  • 32,064
  • 4
  • 39
  • 55