I want to create a Checkbox inside the Select Option and it only shows the checkbox in Select All Sites option. How can I implement it?
I am using react-select library for dropdown.
current behaviour:
My code:
https://codesandbox.io/s/proud-water-cvjhgc?file=/src/index.js
Expected output:
Can anyone help me. Thanks
You can use https://www.npmjs.com/package/multi-select-checkbox this library instead of react-select, It has more customization
here is an example from my comment
Basicly . You cannot add a clickable element inside another clickable element How would the browser understand which one is supposed too catch the click, a specific one or all of them ? You can use javascript to add select attribute to all options and use the attribute multiple on select to allow this
And a possible way of doing it
const all = document.querySelectorAll("select option:not(:first-of-type");
let selectAll = document.querySelector("select option:first-of-type");
selectAll.addEventListener("click", function () {
this.style.color="red";
this.style.background="yellow";
for (let i = 0; i < all.length; i++) {
all[i].setAttribute("selected", "selected");
}
});
select{height:14em}
<select multiple name="select">
<option>Select All</option>
<option value="a">Value A</option>
<option value="b">Value B</option>
<option value="c">Value C</option>
<option value="d">Value D</option>
<option value="e">Value E</option>
<option value="f">Value F</option>
<option value="g">Value G</option>
<option value="h">Value H</option>
</select>
Related
I have dynamically generated the following dropdown list using jquery for the calculator app I am currently making:
<select type="text" id="field__left">
<option label="Please choose an unit!" text="Please choose an unit!"></option>
<option label="inch" text="Inch" value="0.0254"></option>
<option label="foot" text="Foot" value="0.3048"></option>
<option label="yard" text="Yard" value="0.9144"></option>
<option label="rod" text="Rod" value="5.0292"></option>
<option label="chain" text="Chain" value="20.1168"></option>
<option label="furlong" text="Furlong" value="201.168"></option>
<option label="mile" text="Mile" value="1609.344"></option>
<option label="cable" text="Cable" value="185.2"></option>
<option label="nautical mile" text="Nautical mile" value="1852"></option>
<option label="shipday" text="Shipday" value="185200"></option>
</select>
What now I try is to access the value attribute of every option, but I don't get far. The examiner is showing the value attribute in the elements tab, I can also find under the options when I look at the properties in the browser, but I am unable to access them via JavaScript.
I tried:
const leftVal = $('#field__left').children('option').attr('value');
also
const leftVal = $('#field__left').children('option').data('value');
but it returned undefined, while:
const leftVal = document.querySelector('#field__left').getAttribute('value');
gave me null.
Anybody has the ide where my mistake lies?
Thank you in advance.
I try is to access the value attribute of every option
You need a loop...
$("#field__left option").each(function(){
console.log($(this).val())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select type="text" id="field__left">
<option label="Please choose an unit!" text="Please choose an unit!"></option>
<option label="inch" text="Inch" value="0.0254"></option>
<option label="foot" text="Foot" value="0.3048"></option>
<option label="yard" text="Yard" value="0.9144"></option>
<option label="rod" text="Rod" value="5.0292"></option>
<option label="chain" text="Chain" value="20.1168"></option>
<option label="furlong" text="Furlong" value="201.168"></option>
<option label="mile" text="Mile" value="1609.344"></option>
<option label="cable" text="Cable" value="185.2"></option>
<option label="nautical mile" text="Nautical mile" value="1852"></option>
<option label="shipday" text="Shipday" value="185200"></option>
</select>
$('#field__left').children('option') will return an array of all select option nodes, you have to iterate through it to get values of each option
Here is the simple solution
// get list of an options
var options = $('#field__left option');
// Then, convert that into an array of just the values
var values = $.map(options, e => $(e).val())
console.log(values)
How can I select an option with javascript (/console in google chrome)?
This is a part of the html code:
<nobr>
Element<br>
<span class="absatz">
<br>
</span>
<select name="element" class="selectbox" style="width:114" size="12" onchange="doDisplayTimetable(NavBar, topDir);">
<option value="0">- All -</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">X</option>
<option value="4">C</option>
<option value="5">D</option>
<option value="6">E</option>
<option value="7">F</option>
<option value="8">G</option>
<option value="9">H</option>
<option value="10">I</option>
<option value="11">J</option>
<option value="12">K</option>
<option value="13">L</option>
<option value="14">M</option>
<option value="15">N</option>
<option value="16">O</option>
<option value="17">P</option>
<option value="18">Q</option>
<option value="19">R</option>
</select>
</nobr>
Or http://pastebin.com/JSaKg4HB
I already tried this:
document.getElementsByName("element")[0].value = 1;
But it gives me this error:
Uncaught TypeError: Cannot set property 'value' of undefined
at :2:48
at Object.InjectedScript._evaluateOn (:875:140)
at Object.InjectedScript._evaluateAndWrap (:808:34)
at Object.InjectedScript.evaluate (:664:21)
EDIT:
I I tried it but it don't works on for the full website. Maybe because there is another html tag inside the first html tag(if I download the website, there is another html file called welcome.html where the selectbox is.) I thinks it's in an iFrame, because chrome gives me the Option "show Frame".
EDIT 2:
I can access the frame where the selectbox is but I still won't find the selectbox. Here is the code of the frame(not the full code): pastebin.com/iVUeDbYV
Try this:
document.querySelectorAll('[name="element"]')[0].value;
Although it is very weird that getElementsByName is not working for you. Are you sure the element is in the same document, and not in an iFrame?
The simple answer:
document.getElementById("select_element").selectedIndex = "option index";
Where option index is the index of the option in the dropdown that you'd like to activate.
You can get the index of an option by using this:
var selected = document.querySelector( '#'+div+' > option[value="'+val+'"]' );
Where div is the ID of the <select> tag.
how this helps!
This will do what you want.
document.querySelector('[name="element"]').value = 4 // The value you want to select
and this will retrieve the value
var value = document.querySelector('[name="element"]').value; // 4
this explains what's going on
var option = document.querySelector('[name="element"]');//option element
option.value; // 4
option.selectedIndex; // 4
option.selectedOptions; // [<option value="4">C</option>]
option.selectedOptions[0].innerText; // C
option.selectedOptions[0].value; // 4
Remember that selectedOptions is an array because more than one option may be selected, in those cases, you will have to loop through the array to get each value. As per Hanlet Escaño's comment, make sure your code is set to execute after the DOM has loaded.
window.onload = function() {
document.querySelector('[name="element"]').value = 0; // sets a default value
}
I have a listen of car makes and car models. When a user selects a certain car make, the relevant models appear in the next drop down.
These are some of options in the car make dropdown. It's a WordPress site so it has been assigned an id and value.
<option id="level-0" value="29">Alfa Romeo</option>
<option id="level-0" value="73">Audi</option>
<option id="level-0" value="75">BMW</option>
<option id="level-0" value="31">Citroen</option>
<option id="level-0" value="78">Fiat</option>
Here is are options for the car model dropdown. I have given each option a unique id to link them to their respective car make.
<option id="cars-bmw" value="172">1 Series</option>
<option id="cars-bmw" value="173">2 Series</option>
<option id="cars-bmw" value="106">3 Series</option>
<option id="cars-audi" value="169">A1</option>
<option id="cars-audi" value="170">A3</option>
<option id="cars-audi" value="171">A4</option>
When the page loads, I have already defined the classes .cars-bmw and .cars-audi (etc) as style display: none
I now have javascript to check which option in the first dropdown has been selected. From there it can determine which .car-make to display
Here is a non working fiddle :(
http://jsfiddle.net/HPMkL/
You can't use ids like that since it has to be unique... try an data-* attribute like
<option id="level-0" data-make="cars-audi" value="73">Audi</option>
then in category
<option data-make="cars-audi" value="169">A1</option>
<option data-make="cars-audi" value="170">A3</option>
<option data-make="cars-audi" value="171">A4</option>
then
jQuery(function ($) {
var $cat = $('#cat'),
$models = $cat.find('option').slice(1).remove(),
$test = $('#test');
$test.change(function () {
$models.add($cat.find('option').slice(1).remove());
var $opts = $models.filter('[data-make="' + $(this).find('option:selected').data('make') + '"]');
$cat.append($opts)
}).change()
})
Demo: Fiddle
Try this. I did some modification
$('#test').change(function(){
if(document.getElementById('test').value == "73") {
document.getElementById('cars-audi').style.display="inline";
}});
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/
How can I get the values selected in the drop-down list, using a JavaScript function? User can select multiple values from both the elements. Following are the elements I'm using. Thanks in advance.
<select name="icOptions" id="icOptions" style="display: none" multiple="multiple">
<option value="Choose an Option" selected="selected">Choose a Team </option>
<option value="IDX">IDX</option>
<option value="Support">SUPPORT</option>
<option value="webapps">WEBAPPS</option>
</select>
<select name="ocOptions" id="ocOptions" style="display: none" multiple="multiple">
<option value="Choose an Option" selected="selected">Choose a TeamMember </option>
<option value="sanjay740">sanjay740</option>
<option value="milind740">milind740</option>
</select>
var fld = document.getElementById('icOptions');
var values = [];
for (var i = 0; i < fld.options.length; i++) {
if (fld.options[i].selected) {
values.push(fld.options[i].value);
}
}
// do something with values
Really Awesome Library for your need using jQuery or Prototype
http://harvesthq.github.com/chosen/
Have a look at it.
It supports select & multiselect in a really nice way
An ES6/functional style alternative to the accepted answer:
const values = Array.apply(null, e.target.options)
.filter(option => option.selected)
.map(option => option.value);