Dropdown auto select on data attribute - javascript

I use this code to autoselect an option on a dropdown. How can I change it so as to not match the value, but tha data-id attribute?
window.onload = function(){
document.getElementsByName("program")[0].value=+param1;
}
<select name="program">
<option data-id="1234" value="567">text</option>
<option data-id="897" value="65475">text</option>
</select>

You can do that by looking for that attribute value with querySelector() and setting the found option's selected attribute.
I would also suggest to respond to the document.DOMContentLoaded event instead of window.load:
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('option[data-id="1234"]')
.setAttribute('selected', 'selected');
});
<select>
<option data-id="12" value="7">other option</option>
<option data-id="1234" value="567">select this</option>
</select>

Related

Change selected element back to main base using Jquery

I am creating a select box that when I select a value in main select box Domains, it will appear other select box Types like Diatoms or Flagellates.... I am done with that part however, I am trying to change back the selected item in a select box that new appear to the main first one. I mean when I selected a Diatoms in Domains select box and it will appear then I select some item in Diatoms. Then I change other items in Domains and other select box will appear, the Diatoms will disappear. But the thing is the selected item that I select still remain like when I select it, I want to change it back to first option default, not the item. Here is my code
I already tried to put 'selectedIndex', 0. However it not work.
HTML
<ul class="inline_list">
<li class="Domains">
<select>
<option selected disabled hidden>Domains</option>
<option value="Diatoms">Diatoms</option>
<option value="Flagellates">Flagellates</option>
<option value="Dinoflagellates">Dinoflagellates</option>
<option value="Ciliates">Ciliates</option>
<option value="Coccolithophore">Coccolithophore</option>
<option value="Miscellaneous">Miscellaneous</option>
<option value="Other_plankton">Others</option>
</select>
</li>
<li class="Diatoms domains_types">
<select>
<option selected disabled hidden>Types</option>
<option value="Asterionellopsis">Asterionellopsis</option>
<option value="Bacillaria">Bacillaria</option>
</select>
</li>
<li class="Flagellates domains_types">
<select>
<option selected disabled hidden>Types</option>
<option value="amoeba">amoeba</option>
<option value="Chrysochromulina">Chrysochromulina</option>
</select>
</li>
<script src="js/select_box.js"></script>
</ul>
CSS
.domains_types{
display: none;
}
Jquery
$(document).ready(function(){
$('.Domains').ready(function(){
$('select').change(function(){
$("select option:selected").each(function(){
if($(this).attr("value")=="Diatoms"){
$('.domains_types').hide();
$('.Diatoms').css('display','inline-block');
}
if($(this).attr("value")=="Flagellates"){
$('.domains_types').hide();
$('.Flagellates').css('display','inline-block');
}
});
}).change();
});
});
You code can be easily optimised to reduce the redundancy in your code. Some straightforward improvements that we can do are:
Removing the ready event listener from $('.Domains'). The ready function is specific to the document object only, which maps to the DOMContentLoaded event. It's simply a convenience method made available by jQuery.
Instead of iterating through all options, you can simply get the value of the <select> element by calling this.value. This removes one layer of nesting form your code
Instead of creating a new if statement for each possible value, you can actually just use '.' + this.value to select the correct element, since you have one-to-one mapping of the first <select> elements options values to the <li> wrapper for the second level of <select> elements. For example, if the value selected is Flagellates, then the selector will select for $('.' + this.value) which evaluates to $('.Flagellates')
To "reset" your second level of <select> element, simply select the first option and set its selected property to true, i.e. $('option:first-child').prop('selected, true').
hidden is not an attribute/property of an <option> element. You can remove it.
With that in mind, here is the improved and working code:
$(document).ready(function() {
$('.Domains select').change(function() {
$('.domains_types')
.hide() // Hide the <li> element
.find('select option:first-child') // Get the nested select's first option
.prop('selected', true); // Select it
$('.' + this.value).css('display', 'inline-block');
}).change();
});
.domains_types {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="inline_list">
<li class="Domains">
<select>
<option selected disabled>Domains</option>
<option value="Diatoms">Diatoms</option>
<option value="Flagellates">Flagellates</option>
<option value="Dinoflagellates">Dinoflagellates</option>
<option value="Ciliates">Ciliates</option>
<option value="Coccolithophore">Coccolithophore</option>
<option value="Miscellaneous">Miscellaneous</option>
<option value="Other_plankton">Others</option>
</select>
</li>
<li class="Diatoms domains_types">
<select>
<option selected disabled>Types</option>
<option value="Asterionellopsis">Asterionellopsis</option>
<option value="Bacillaria">Bacillaria</option>
</select>
</li>
<li class="Flagellates domains_types">
<select>
<option selected disabled>Types</option>
<option value="amoeba">amoeba</option>
<option value="Chrysochromulina">Chrysochromulina</option>
</select>
</li>
</ul>

Remove Selected Value in Dropdown List Using JavaScript

I have an HTML list that I want to remove elements from as the user chooses. I've tried using this code from this thread but my issue seems to be accessing the element.
Here's my HTML:
<div id="ShipPlacement">
Ship:
<select name="shipSelec" id="shipSelec">
<option value="aircraftCarrier">Aircraft Carrier</option>
<option value="battleship">Battleship</option>
<option value="cruiser">Cruiser</option>
<option value="destroyer">Destroyer</option>
<option value="destroyer">Destroyer</option>
<option value="submarine">Submarine</option>
<option value="submarine">Submarine</option>
</select>
<button type="button" onclick="placeShip()">Remove Selected Ship</button>
And here's my JavaScript:
$( document ).ready(function() {
var shipList=document.getElementById('shipSelec');
});
function placeShip() {
shipList.remove(shipList.options[shipList.selectedIndex].value;);
shipList.remove(shipList.options[shipList.selectedIndex]);
shipList.remove(shipList.options[selectedIndex]);
shiplist.remove([shipList.selectedIndex])
}
I have several instances of the remove() method but that none of them work.
However, the best way I can convey my error to you is through JSFiddle.
As you've jQuery loaded on the page, use it to bind events and remove element from DOM.
First, bind click event on the button using click. Use the :selected pseudo-selector to select the selected option from the dropdown and remove() to remove it from DOM.
$('button').click(function() {
$('#shipSelec option:selected').remove();
});
$(document).ready(function() {
$('button').click(function() {
$('#shipSelec option:selected').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ShipPlacement">
Ship:
<select name="shipSelec" id="shipSelec">
<option value="aircraftCarrier">Aircraft Carrier</option>
<option value="battleship">Battleship</option>
<option value="cruiser">Cruiser</option>
<option value="destroyer">Destroyer</option>
<option value="destroyer">Destroyer</option>
<option value="submarine">Submarine</option>
<option value="submarine">Submarine</option>
</select>
<button type="button">Remove Selected Ship</button>
</div>
Updated Fiddle
Note that there are several issues in your code
In fiddle "LOAD TYPE" option should be selected to "No Wrap".
jQuery is not included. This can be included using the "Frameworks & Extensions" option in the JavaScript tab
Syntax error in the first statement in the placeShip() near .value;);
shipList is local to the ready callback and hence not accessible from outside of it. Not even in placeShip()
With pure JavaScript
var shipList = document.getElementById('shipSelec');
shipList.options[shipList.selectedIndex].remove();
Fiddle
$("#btn").click(function() {
$("#shipSelec option:disabled").prop("disabled", false)
$("#shipSelec option:selected").prop("disabled", true)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ShipPlacement">
Ship:
<select name="shipSelec" id="shipSelec">
<option value="aircraftCarrier">Aircraft Carrier</option>
<option value="battleship">Battleship</option>
<option value="cruiser">Cruiser</option>
<option value="destroyer">Destroyer</option>
<option value="destroyer">Destroyer</option>
<option value="submarine">Submarine</option>
<option value="submarine">Submarine</option>
</select>
<button type="button" id="btn">Remove Selected Ship</button>
I suggest just disable the option not remove

Set value of a select box

I have the following select-box:
<select name="country">
<option value="us">America</option>
<option value="jp">Japan</option>
<option value="cn">China</option>
<option value="vi">Vietnam</option>
</select>
By default, the value of this select-box is "us" and the displayed text is "America".
What I want to do is set the value of this select box to "jp" and set the text displayed on this select-box to "Japan" using javascript.
I can set the value to "jp" easily by setting the "selected" attribute to "true", but I can't change the text display on the select-box (It still display "America" instead of "Japan").
Are there anyone know how to do that?
You need to set the value of the select itself rather than set the options selected to true.
var element = document.getElementsByName('country')[0];
element.value = 'jp';
Can you try this, add selected="selected" based on your preference in HTML, Javascript document.getElementsByName('country')[0].value.
Using HTML:
<select name="country">
<option value="us">America</option>
<option value="jp" selected="selected" >Japan</option>
<option value="cn">China</option>
<option value="vi">Vietnam</option>
</select>
Using javascript:
document.getElementsByName('country')[0].value = 'jp';
To use JavaScript, you could use...
selectElement.value = "jp";
jsFiddle.

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

HTML select option value

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/

Categories