HTML select option value - javascript

I have a select option :
<select>
<option value="select">select</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="vw">VW</option>
</select>
Now what I want is that whatever option I select from the dropdown, the value in the select should always be "select".
Thanks.

you could try something like this:
<select id="yourselect">
<option value="select">select</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="vw">VW</option>
</select>
<script>
var s = document.getElementById('yourselect');
s.onchange = function() {
s.selectedIndex = 0; // on change event always select the first option
}
</script>
Example Fiddle : http://jsfiddle.net/8geek/

Add an event listener for an onchange event, in that listener you set the currently selected option to Select dynamically

Like Jukka mentioned, it seems like you want a select element where all the choices have the same effect? However, you should at least store the the chosen option.
Maybe this is something you are looking for: http://jsfiddle.net/NfRRM/

Related

Select box Select all / unselect all or select one option restricted multiple options

I have a Select box, I want to select all options with a single click also unselect all with a single click so if the user wants to select another option so just select only 1 option not multiple.
i want to select / unselect all option on this first option click`
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select>
<option value="all">select all /unselect all</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
`
A Select is usually used to get only ONE value, perhaps you need a checkbox or something like that... but who knows :)
In order to achieve what you want is that you must add an event listener to the Select and try to store the 'real' values in a variable maybe this example helps you out.
// Html
<select id="mySelect">
<option value="all">select all /unselect all</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
// Js
var allValues = [];
function getAllValues(){
return $('#mySelect option').toArray().map(({value}) => value)
}
function selectHandler(event) {
const { target } = event;
if (target && target.value == 'all') {
allValues = getAllValues()
} else {
allValues = [target.value]
}
// Do something with this
console.log(allValues)
}
$('#mySelect').on('change', selectHandler)

dropdown selected option picks option in another dropdown

i am looking how to have it when i pick volvo option then the 740 is selected. i want to add other if statements but i cant not figure this out. if i pick saab i want it to select 240
I would like to use jquery or javascript
Thank you in advance. This is what i have and it does not work.
Below is the corrected code to change the drop downs.
<select id="myselect1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select id="myselectVolvo">
<option value="740">740</option>
<option value="940">940</option>
<option value="240">240</option>
<option value="340">340</option>
</select>
$('#myselect1').change(function(){
if($('#myselect1').val() == 'volvo'){
$('#myselectVolvo').val('940').trigger('change');}
else if($('#myselect1').val() == 'saab'){
$('#myselectVolvo').val('240').trigger('change'); }
//alert("The text has been changed.");}
//};
});
You have a typo in the last js code line.
#myselctVolvo should be #myselectVolvo
your condition in if is wrong you need to use $('#myselect1').val() == 'volvo'. You
missed .val() after jquery selector.

Setting selected attribute for <select multiple> with jquery

I have a multiple select like this one could be:
<select multiple id="brand">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
And I'm looking for a way to end up like:
<select multiple id="brand">
<option value="volvo" selected="selected">Volvo</option>
<option value="saab" selected="selected">Saab</option>
<option value="opel" selected="selected">Opel</option>
<option value="audi" selected="selected">Audi</option>
</select>
I can't depend on external libraries and I can't make the .each function to work properly.
Besides I'm getting the original dinamically set with many fields, and this will be set to this only in a particular case, but i can't figure out why this isn't working for me.
The closest approach i found is:
$("#brand").each(function(){$(this).attr("selected","selected");});
Can you please point me out where I'm going wrong? Thanks
You need to select the options, for instance with a #brand > option selector:
$("#brand > option").each(function() {
$(this).attr("selected","selected");
});
console.log($("#brand").html());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple id="brand">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
in Vanilla Script you could use something like this
document.querySelectorAll('#brand option').forEach((o)=>{
o.selected = 'selected'
})
If You need IE, be aware that for Each is not supported with node Lists. This should work inkl. IE
nodesArray = [].slice.call(document.querySelectorAll("#brand option"));
nodesArray.forEach(function (o) {
o.selected = 'selected'
})
You wont see the changes in HTML Code, but the DOM Properties of the options will change. Hope this helps.

populate second dropdown based on selected value of first dropdown

I have two dropdown i want when i select for example from dropdown test1 option with value a
the second dropdown test2 show only the options that have value a
<select name="test1" id="test1" onchange="document.getElementById('test2').value=this.value">
<option value="Select">Select</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<select id="test2" name="test2">
<option value="Select">Select</option>
<option value="a">a</option>
<option value="a">b</option>
<option value="a">c</option>
<option value="b">1</option>
<option value="b">2</option>
<option value="b">3</option>
<option value="c">c</option>
</select>
Or you can go this way:
jQuery(document).ready(function($){
var options = $('#test2 option');
$('#test1').on('change', function(e){
$('#test2').append(options);
$('#test2 option[value!=' + $(this).val() +']').remove();
});
});
fiddle
Since you've tagged this with JQuery, if I were to not alter your HTML at all, you could do this by changing the JS in your onchange from this:
document.getElementById('test2').value=this.value
. . . to this:
$("test2").find("option").hide();
$("test2").find("[value^='" + $("test1").val() + "']").show();
That would hid all of the options in the "test2" dropdown, and then show all of the ones that have a value that starts with the value of the currently selected "test1" option.
Note: this will also work if you chose to update the code to only use the "test1" values as a prefix for the "test2" values. ;)
UPDATE: Fixed a typo in the code.
Like it was said, you really don't want to do it this way as each option should have a unique value....but here is one way to accomplish it: jsFiddle
Using jQuery, you could check for the value of the selected option in test1, hide all those in test2 that don't match then show those with a matching value.
$('#test1').on('change', function() {
$('#test2 option:not(option[value='+$(this).val()+'])').hide();
$('#test2 option[value='+$(this).val()+']').show();
});

When select one option from "multiple select", remove it from other selects (and reverse)

I have 3 multiple selects like:
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
</select>
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
</select>
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
</select>
and I am looking for best solution. Wanted behaviour is when you select one item in one multi select, then remove it from the others (and conversely).
I using jquery Chosen plugin.
Situation: you have 3 roles, but user can be just in one role.
jsFiddle
basically you want to remove the option via JS/jQuery and the update the plugin.
Here is some code
$(".chzn-select").change(function(){
$(".chzn-select")
.not($(this))
.find("option[value="+$(this).val()+"]")
.remove();
$(".chzn-select").trigger("liszt:updated");
});
and a fiddle link JsFiddle
EDIT:
try this new fiddle it handles multiple select
$(".chzn-select").css('width', '300px').chosen({
display_selected_options: false,
no_results_text: 'not found',
}).change(function(){
var me = $(this);
$(".chzn-container .search-choice").each(function(){
var text = $('span',this).text();
$(".chzn-select")
.not(me)
.find("option").each(function(){
if ($(this).text() == text) $(this).prop('disabled',true);
});
});
$(".chzn-select").trigger("liszt:updated");
});
EDITED:
try this:
JsFiddle
see if it pleases you... :)

Categories