0

I have a chosen select and I want to get the value of the select option by using their text value. https://harvesthq.github.io/chosen/ This is chosen select, it replaces the select field with a more advanced one.

So i know how to update the chosen select with a value, but for some reason the chosen js library removes the values and replaces them with numbers. 

<select name="customProductData[4][5]" class="vm-chzn-select chzn-done" id="selOIG" style="display: none;">
    <option value="0">Choose an option</option>
    <option value="5">Green</option>
    <option value="8">Brown</option>
    <option value="7">Black</option>
    <option value="6">Red</option>
    <option value="9">Blue </option>
</select>

This is my select, you see the text with the value

No problem, but now I have the text and I need to corresponding values.

jQuery('select').val(17);
jQuery('select').trigger("liszt:updated");

This is how to update with values, works perfectly. But now I have to get hte value by text. I got this, but that does not work, probably because its chosen.js:

console.log($('select').find('option[text="'+ colorThing +'"]').val());
console.log($('select option').filter(function () { return $(this).html() == colorThing; }).val());

Where colorThing is the text I want to look up in the Chosen select box.

Anyone know how to update the chosen with text, or get the value of the chosen by text.

Kuubs
  • 1,300
  • 1
  • 14
  • 42
  • Do you mean $('select option:selected').text()? – Steve Mar 28 '18 at 15:14
  • Please provide [mcve] – Pitto Mar 28 '18 at 15:15
  • I think you may need to re-write your question as it's quite unclear exactly what you mean. What exactly is Chosen.js? – Steve Mar 28 '18 at 15:16
  • Wait what, I asked a couple of questions regarding chosen here, and it was never a problem. https://harvesthq.github.io/chosen/ Its quite known? – Kuubs Mar 28 '18 at 15:17
  • From what I read in the docs quickly `jQuery('select').trigger("liszt:updated");` should actually be `jQuery('select').trigger("chosen:updated");` and if your dropdown is actully call liszt then `jQuery('#liszt').trigger("chosen:updated");` – Steve Mar 28 '18 at 15:23
  • `jQuery('select')` will operate on all select/dropdowns in your page. You probably should target them specifically using the id e.g. `jQuery('#liszt')`, – Steve Mar 28 '18 at 15:29
  • I only have one select, so that is why it works. It's mainly trying to get it working though, I can get all hte bugs out when I do have the working code.. – Kuubs Mar 28 '18 at 15:38
  • The trigger works.. With both chosen:updated or liszt:updated, im trying to get the value with the text I got – Kuubs Mar 28 '18 at 15:38
  • It would be `$('#selOIG').val()` and `$('#selOIG option:selected').text()` respectively. – Steve Mar 28 '18 at 15:41
  • that is not my question... did i really did a bad job at explaining? what is not clear about this: I have a chosen select and I want to get the value of the select option by using their text value. For example I have the color Blue as text value, now I want to get that value of 9 get back to update the chosen select with the right value. See my edit of the post with example seelct field – Kuubs Mar 28 '18 at 15:44
  • This is probably what your looking for : https://stackoverflow.com/a/3744323/758848 – Steve Mar 28 '18 at 15:45
  • Did you actually take a look at my code? That is EXACTLY what i already tried :S I get undefined back if I try to console.log this – Kuubs Mar 28 '18 at 15:46
  • As I said - you should be targetting by id for more specific results. And it also depends on where colorThing is defined - it may be out of scope and thereby `undefined`. – Steve Mar 28 '18 at 15:48
  • If I change colorThing with the actual text it also gives back undefined... Plus working with ID's is the same with classes if you have only one class in your HTML. Why are you acting so condescending. If you don't want to help just dont comment. – Kuubs Mar 28 '18 at 15:51
  • I don't know where I was condescending but good luck. – Steve Mar 28 '18 at 15:51
  • "As I said - you should be targetting by id for more specific results." "It would be $('#selOIG').val() and $('#selOIG option:selected').text() respectively", sure sooooo helpful! – Kuubs Mar 28 '18 at 15:52

2 Answers2

0

Try this. If i find a better solution i will post it

$.each($("#SupplyChainType")[0].options,function(index,value){

if(value.innerHTML=="Overage")
{
    x=value.value
}

})

Sandeep Vootoori
  • 56
  • 4
  • I don't want to append, I want to get the value of the existing Chosen.js select box. I have the text that correspondents to the value, but how do I retrieve it based on this text? – Kuubs Mar 28 '18 at 15:17
  • Done i have added the select field – Kuubs Mar 28 '18 at 15:40
  • I have the text, I have the text Blue. Now I want to retrieve that value with this text. THAT is my question. I want to retrieve the value (9) that corresponds with my text value (Blue) – Kuubs Mar 28 '18 at 15:45
  • $.each($("#SupplyChainType")[0].options,function(index,value){ if(value.innerHTML=="Overage") { x=value.value } }) – Sandeep Vootoori Mar 28 '18 at 15:56
  • Thanks, this gave me the entrance to make the solution. I will update may question with my own answer – Kuubs Mar 28 '18 at 16:59
0

I found the answer with help of Sandeep V his answer:

$("select option").each(function(index,value)
{

    if(value.innerHTML.trim()==colorThing.trim())
    {

       correctValue=value.value
    }
});
Kuubs
  • 1,300
  • 1
  • 14
  • 42