I am trying to remove the default selected option in the HTML and set the first as selected, my jQuery seems to be setting the first option as selected fine but it's not appearing selected as it's not removing the original selected option. I have tried 2 methods which are below:
option 1
$('.ty-profile-field__select-state :selected').prop('selected', false);
// mark the first option as selected
$(".ty-profile-field__select-state option:first").attr('selected','selected');
option 2
$('.ty-profile-field__select-state option').each(
function() {
$(this).removeAttr('selected');
}
);
// mark the first option as selected
$(".ty-profile-field__select-state option:first").attr('selected','selected');
option 3
$('.ty-profile-field__select-state').find('option:selected').removeAttr("selected");
// mark the first option as selected
$(".ty-profile-field__select-state option:first").attr('selected','selected');
HTML from source
<select x-autocompletetype="state" id="elm_24" class="ty-profile-field__select-state cm-state cm-location-billing" name="user_data[b_state]">
<option value="" selected="selected">- Select state -</option>
<option value="ACT">Australian Capital Territory</option>
<option value="NSW">New South Wales</option>
<option value="NT">Northern Territory</option>
<option value="QLD">Queensland</option>
<option value="SA">South Australia</option>
<option value="TAS">Tasmania</option>
<option value="VIC" selected="">Victoria</option>
<option value="WA">Western Australia</option>
</select>
You can see it's taking the first option and making selected for not removing the one that is initially set so it's not changing to the first.
Not sure, but you said you want to remove the default, leaving the next item as the selected item. This does that: https://jsfiddle.net/Twisty/um7xhx7m/1/
$(document).ready(function() {
$('.ty-profile-field__select-state option:selected').remove();
});
Now if anything else is :selected when this page loads, it would be removed. So you could adjust to selecting just option[0] like so:
$(document).ready(function() {
$('.ty-profile-field__select-state option:eq(0)').remove();
});
you can try something like:
$(#elm_24).removeAttr('selected');
$('.ty-profile-field__select-state').val('');
$('.ty-profile-field__select-state option:first').prop('selected', true);
$('.ty-profile-field__select-state option').each(function() { $(this).prop('selected', false); });
$(".ty-profile-field__select-state option:first").prop('selected', true);
$('.ty-profile-field__select-state').find('option:selected').prop('selected', false);
enter code here
Turned out what methods i was doing was fine but i needed to wrap in
$(window).load(function(){
As seems the option was being set after i was trying to set it
You can do it in this way.
$(document).ready(function(){
$(".ty-profile-field__select-state option").removeAttr('selected');
$(".ty-profile-field__select-state option:nth-child(2)").attr('selected',true);//Australian Capital Territory
$(".ty-profile-field__select-state option:first").attr('selected',true);//Select state
})
Here is the plunker
When you say option:first, it is first child that is Select state
Related
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 )
I have a html select box with several options. Upon selection of an option I want Only the selected option and the first option to be shown in the select option dropdown. I know how to filter and show only one option but I cannot figure out how to include both option where the 'selected' option remains 'selected'. I have include snippets similar to of my code as well as a demo.HTML:
<select id="myDropdown">
<option selected>Select fruit</option>
<option>Grapes</option>
<option>Bananas</option>
<option>Oranges</option>
<option>Apples</option>
</select>
JS:
$(document).on('change', '#myDropdown', function() {
$('option', this).not(this,'option:gt(0)').siblings().remove(); });
I am trying to use the first option to perform another function 'on change' so I need the selected option to remain selected while the rest being filtered out except for the first. For example if 'Oranges' were selected, this is what you would see:
<select id="myDropdown">
<option>Select fruit</option>
<option>Oranges</option> //selcted value
</select>
BTW I am using jquery mobile to style as well.
jsfiddle
.not only takes 1 parameter. If you want to filter on two different selectors, you can add a comma between them inside the string. You can also use the :selected selector:
$('option', this).not(':eq(0), :selected').remove();
See Updated Fiddle: http://jsfiddle.net/znx9hxvu/9/
Looking for an easy event to bind to that will fire any time an option is selected, even when it is the currently selected option. jQuery's .change() does not seem to fire when selecting the selected option again, but only the others (which makes sense, because it is a "change" event after all).
Is there anything else out there that is more or less identical to how change works, but will also fire when the selected element is selected again? Or will I need to get sloppy with click events or something?
<select id="select">
<option value="1">1</option>
<option value="2">2</option>
</select>
JS
$(function(){
$('#select option').click(function(){
alert($(this).val());
});
})
While Irfan's solution seems like a viable one, it did not work for me in Chrome. However, I ended up using a sort of workaround to solve this problem where I set a placeholder type option when the click event fires on the select box.
<select id="dropdown">
<option value="choose" disabled selected>Choose</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<script>
// When the dropdown is opened, the "choose" option is selected
$('#dropdown').on('click', function(){
$("#dropdown option").filter(function() {
return $(this).val() == "choose";
}).prop('selected', true);
// On change will always fire
$('#dropdown').on('change', doStuff);
});
function doStuff(){
// Grab the selected value before click changes it
let currentValue = $('#dropdown').val();
alert(currentValue);
/* Do other stuff with currentValue
Wait until second click that selects sets value to "choose"
when the user makes their selection, then set the selector
back to what the user chose
*/
setTimeout(function(){
$("#dropdown option").filter(function() {
return $(this).val() == order;
}).prop('selected', true);
}, 100);
}
</script>
The result is a slight delay before the selector shows what the user chose, but the change event always fires, since the active value was changed. This doesn't work as well in IE or FireFox, but if you can detect the browser being used, and combine this with Ifran's solution, you should be able to have this working on all browsers.
This is how I just solved a similar problem. Needed to display other fields when certain option was chosen. put the onclick on the select and passed the value of the option. Then just target the specific option you want in the function.
<select onclick='myfunc($(this).val())'>
<option value="" selected disabled hidden>pick</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
Jquery
function myfunc(val){
if(val == 'a'){
$("#a").show();
$("#b").hide();
}
if(val=='b'){
$("#a").hide();
$("#b").show();
}
}
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
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");
});