We Keep Coding

select <option> text invisible before on change

I'm experiencing a weird visual issue with <select> <option> elements. I have a function which runs every time a specific <option> is chosen from a <select> dropdown, this code then sets one of the options of a select element to be selected, this is happening via:
$('select[name="data[ApplicationPayday][EmpIndustry]"]').find('option[value=""]').attr('selected', true)
The select that gets a value selected is:
<select class="custom-select" id="EmpIndustry" name="data[ApplicationPayday][EmpIndustry]" aria-describedby="EmployerIndustryHelp" required>
<option value="" selected>Please Select</option>
<option value="10">Health</option>
<option value="22">Retail</option>
</select>
However, the text of the select is invisible, despite there being valid options in the menu.
Any idea why?
REPRODUCTION URL: https://codepen.io/sts-ryan-holton/pen/LKJbzL

Use below code.
$('select[name="data[ApplicationPayday][EmpIndustry]"]').find('option[value=""]').prop('selected', true);

Looks like the issue is with:
$('select[name="data[ApplicationPayday][EmpIndustry]"]').val(25)
When you are moving between industries you are resetting the selected value to '25'. but the value of your 'Please Select' is "" (empty string). In your fiddle I changed that line to:
$('select[name="data[ApplicationPayday][EmpIndustry]"]').val("")
And now when I switch it is correctly displaying Please Select.

You can use anyone of below code
$('select[name="data[ApplicationPayday][EmpIndustry]"]').find('option[value=""]').prop('selected', true);
$('select[name="data[ApplicationPayday][EmpIndustry]"] option[value=""]').prop('selected', true);
$('select[name="data[ApplicationPayday][EmpIndustry]"]').val('');
Since select option has id and id attribute specifies a unique id for an HTML element, above code can be written like....
$('#EmpIndustry').find('option[value=""]').prop('selected', true);
$('#EmpIndustry option[value=""]').prop('selected', true);
$('#EmpIndustry').val(''); (code is same as ravibagul91 )

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

How to update select text with matched option value text

I would like to update the select text with the selected option text after page load.
Im redirecting on click of a option and after page load getting url from browser and checking which option has that value and wants to replace that matched option's text inside select text.
<div class="sorting-option">
<select id="selectdropdown" class="dropdown-select">
<option value="">Recommended Items</option>
<option value="?sort1desc=F&sort1=Item_NAME">Name (A-Z)</option>
<option value="?sort1desc=T&sort1=Item_NAME">Name (Z-A)</option>
<option value=".f?sort1desc=F&sort1=Item_ONLINECUSTOMERPRICE">Price
(Low-High)
</option>
<option value=".f?sort1desc=T&sort1=Item_ONLINECUSTOMERPRICE">Price
(High Low)
</option>
</select>
</div>
This is what i have tried
$(document).ready( function() {
$('#selectdropdown').bind('change', function () {
location.href = $(this).val();
});
var brwsr_url=document.URL;
var subSting = brwsr_url.substring(brwsr_url.indexOf('?')); //here im getting substring of url to match with option value
$('#selectdropdown').find('option[value="subSting"]').text(); // here im trying to replace the select text with option text which has that url substring
});

You're not concatenating properly. Also you're using getter of text. Instead, use the setter. Also from your comment, I suppose you need
$('#selectdropdown').val(subSting);

Try this mate>I think u are trying to select the option from the selectbox
$('#selectdropdown').find("option[value='"+subSting+"']").attr("selected","selected");

Show first character of selected option in Select

I have a select box like this:
<select id="selectbox1">
<option value="s">Second</option>
<option value="m">Minute</option>
<option value="h">Hour</option>
<option value="d">Day</option>
<option value="w">Week</option>
<option value="t">monTh</option>
<option value="y">Year</option>
</select>
I want when I select for example 1st option second Just S appear on select box and so on.
and when its open for another select again show Second.

Try this:
Add one hidden option and on selection of option take the text of value and insert into hidden option and make it selected forcefully everytime.
$('#selectbox1').on('change', function(){
var option = $(this).find('option:selected');
$('.hide').text(option.val()).val(option.val());
$('.hide').data('value', option.text());
$('.hide').attr('selected', true);
});
To get the selected option value and text, you can this:
$(this).find('option:selected').val();
$(this).find('option:selected').data('value');
DEMO Link

select value of dropdownlist item jquery

HTML
<select id="selectDepartment">
<option value="1">120</option>
<option value="2">20</option>
<option value="3">140</option>
<option value="4">4120</option>
<option value="5">560</option>
<option value="6">451</option>
<option value="7">310</option>
<option value="8">656</option>
<option value="9">444</option>
<option value="10">555</option>
<option value="11">2560</option>
<option value="12">450</option>
</select>
jQuery
$("#selectDepartment").change( function() {
alert($("select option:selected").val());
});
the above function always shows value 1 on alert, when I select any one of the options

Your method of finding the selection option is vague. You're saying "Grab all <select>s". You then go on to grab the :selected option from each of them (of all <select>s on the page). Continued, .val() takes the first value off the top.
Simply put, you're always fetching the selected value of the first <select> found on the page. Assuming #selectDepartment isn't the first <select>, your value will never change.
Try to keep the scope to within the current <Select> using this:
$('#selectDepartment').change(function(){
var selopt = $('option:selected',this);
});
Note that I specify the scope to within the <select> that triggered the .change(). Also note this really isn't necessary as val() works just as easily:
var selopt = $(this).val();
Let jQuery do the heavy lifting. You really only need option:selected if you want control over styling that specific element, or you're working with a multi-select and want more control.

You can do something like this:
$("#selectDepartment").change( function() {
var selected = $(this).find(":selected");
});