We Keep Coding

Chosen.js get value by text

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.

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

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

Manipulating select option selected value in DOM several times without page load

I am in an unfortunate position where I need to be able to copy entire blocks of HTML without the page reloading using javascript/jquery, including inputs and selects.
I have most of it working, but I'm stumped on the selects. In order for it to "copy" properly so the copy displays the selected value of where its copying from, I need to explicitly set the attribute "selected" on the copy from select. The problem is, if I change the value on a select that I will copy from, the previous selections "selected" attribute remains, and I don't know how to get rid of it.
Here is a link to the fiddle and below is the basic test to show you what I mean: fiddle. You'll need to inspect element on the select list and show all of the option tags.
Make a selection
Hit the Enter button
Observe the selected attribute go on the option you chose
Choose a different option
Hit the enter button
Observe that now two options have the selected attribute. At this point I need to get rid of the selected attribute from the step 3 observation
HTML:
<table>
<tr>
<td>
<select>
<option value="">Select One</option>
<option value="test1">Test1</option>
<option value="test2">Test2</option>
<option value="test3">Test3</option>
<option value="test4">Test4</option>
</select>
</td>
</tr>
</table>
<button onclick="enterTest()">Enter</button>
Javascript
function enterTest(){
var $selectedOption = $("select").children(":selected");
$selectedOption.attr("selected","selected");
}

No need to deal with options and selected attribute.
If the values are unique,
var $select = $("select");
function enterTest(){
$select.clone().val($select.val()).appendTo('body');
}
Demo
Otherwise, use selectedIndex:
$select.clone().prop('selectedIndex', $select.prop('selectedIndex'))
Demo

Syntax for onchange event to update a hidden text box with the index value of a select box

I mean, I feel like a total idiot, but I just can't seem to get this right, even after searching for almost two hours.
This select is followed by a hidden text field:
<select name="location_id" class="select green-gradient" single>
<option value="2">New York</option>
<option value="3">London</option>
<option value="4">Singapore</option>
<option value="5">San Francisco</option>
<option value="6">Milan</option>
</select>
<input type='text' name="selected_location_id" class="hidden" value="">
// I usually use this code for checkboxes. It toggles the contents of a hidden text box. I understand that checking a select's values is different. But I can't seem to get it right.
$(document).ready(function(){
$('.switch').change(function( ){
if($(this).next().val() == 1){
$(this).next().val(0);
} else {
$(this).next().val(1);
}
});
})
// I've tried this: but it's not useful since I need to do this for all selects on the page. And it still doesnt update the hidden text box.
$(document).ready(function(){
$('.select').change(function( ){
var selectedValue = $(this "option:selected").val();
$(this).next().val(selectedValue);
});
})
// Maybe I'm just tired. But it's time to ask for help. Thanks in advance.

I think it should be
$('select').change ///(without the dot)
not
$('.switch').change
neither
$('.select').change

var selectedValue = $("option:selected").val();
Works in a jsfiddle by taking the "this" out.

Within the listener, this references the element. You can also get the name of the hidden element from the select element's name, so if they're in a form:
this.form['selected_' + this.name].value = this.value;
and you're done without a single function call.

Trigger change after items are selected in a multiple select

Let's say I have a multiple select box:
<select id="sel" multiple="multiple">
<option value="1">One</option>
<option value="2">Two</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</select>
To select items, you can hold down Ctrl and click on individual items. I want to save the data from this select box after the user is done selecting items. How can I do that?
I thought of using setTimeout and saving 500ms after the onChange event is triggered, but I don't know if this is the best idea.
$('#sel').change(function(){
setTimeout(saveData, 500);
});
I know I could add a 'Save' button, but I want to save the data on the fly.
What is the best way to save data from a multiple select box on the fly (after the user selects items)?

I would do it onchange, and after so much time has passed save it like you have, only thing I would change is resetting the timeout on each change so it only does it on the final onchange.
Something along these lines.
var changeTimeout;
$('#sel').change(function(){
clearTimeout(changeTimeout);
changeTimeout = setTimeout(function(){saveData()}, 1000);
});

How do I change the selected item in a dropdown based on user input in a text box?

I have a select dropdown that could possibly contain over 1000 items for a large customer.
<select name="location" id="location">
<option value="1">Store# 1257</option>
<option value="2">Store# 1258</option>
...
<option value="973">Store# 8200</option>
<option value="974">Store# 8250</option>
<option value="975">Store# 8254</option>
<option value="976">Store# 8290 Fuel Center</option>
</select>
I also have a text box and when the user types in text I want to move the selected item in the dropdown.
For example, if the user types 82 then I want to move to the first item in the box where an 82 exists which would be value 973. If the user types 825 then move to 974, etc. If the user types Fuel, find the first option containing that string.
I am currently using jquery as my javascript library.
What do you suggest for solving this? Should I switch to an autocomplete? If so I need something that has a arrow to dropdown the entire list as some customers may only have 3 or 4 to select from.
Thanks.

Given a variable searchFor that contains the search string, you can select the first option that contains that text with this jquery snippet:
$("#location option[text*=" + searchFor + "]:first").attr("selected", true);
So if you have a text input with the id selectSearchBox, you could write it like this:
$("#selectSearchBox").keyup(function () {
var searchFor = $(this).val();
$("#location option[text*=" + searchFor + "]:first").attr("selected", true);
});

Using jQuery autocomplete plugin might be the best option for you. You can have a look at a previous answer here on SO (please, don't do that select => array translation, use an array or a server side script).