Search option is not working with single select although It is working with multi select.
Below is the code:
html:
<select id="select-name" placeholder="Select a person..." >
<option value="4">Thomas Edison</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
js:
$(function() {
$('#select-name').selectize();
});
This is not documented, I believe, and I find it the hard way by comparing the provided samples. You have to add an option with the value of "" to get that result.
<select id="select-name" placeholder="Select a person..." >
<option value="">Select a Person</option>
<option value="1">Person 1</option>
<option value="2">Person 2</option>
</select>
Related
i wanted to create Bookmarklet which i key-in input, then it search and select from dropdown list in webpage.
i have some code below, but it not working.
thanks.
<select name="ctl00$ContentPlaceHolder1$dtgLot" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$dtgLot\',\'\')', 0)" id="ctl00_ContentPlaceHolder1_dtgLot" style="width:200px;">
<option selected="selected" value=""></option>
<option value="!E625163.05">!E625163.05</option>
<option value="1E001196">1E001196</option>
<option value="1E001242.08">1E001242.08</option>
<option value="1E001492.03">1E001492.03</option>
<option value="1E001493.02">1E001493.02</option>
</select>
Bookmarklet code
javascript:document.getElementsByName("ctl00$ContentPlaceHolder1$dtgLot")[0].value = 1E001196;document.getElementsByName("ctl00$ContentPlaceHolder1$dtgLot")[0].onchange();
javascript:document.querySelector(`select[name="ctl00$ContentPlaceHolder1"] option[value="${prompt('Search value:')}"]`).value = true
I've got a dropdown and I need to put values in there that need to be escaped with javascript.
The reason why I want to use javascript is because the api I query is working with javascript and don't receive the other ways to escape quotes.
Exemple of dropdown value : "ToxKeywords:"genotoxicity" AND ToxKeywords:"ames" OR ToxKeywords:"micronucleus""
So i got this dropdown :
<form method="post" name="query">
<label for="textQuery">Choose Query from list</label>
<select class="form-control space" name="textQuery" id="textQuery">
<option selected disabled>Choose here</option>
<option value="ToxKeywords:">ToxKeywords</option>
<option value="Molecules.Main_name:">Molecule</option>
<option value="Query1">Query 1</option>
<option value=ToxKeywords:systemic toxicity>Query 2</option>
<option value=ToxKeywords:"phototoxicity">Query 3</option>
<option value=ToxKeywords:"llna">Query 4</option>
</select>
And i want to replace for exemple value="Query1" with javascript.
I tried this :
<script>
document.getElementById("textQuery").selectedindex = "Query 1"
select.option.value = "ToxKeywords:\"genotoxicity\" AND ToxKeywords:\"ames\" OR ToxKeywords:\"micronucleus\"";
</script>
Apparently i can select the right value but i don't know how to change it to : "ToxKeywords:\"genotoxicity\" AND ToxKeywords:\"ames\" OR ToxKeywords:\"micronucleus\""
Can you help me to find the right Javascript syntax ?
You can use: document.querySelector(selectors);:
document.querySelector('#textQuery option[value="Query1"]').value =
'http://130.88.150.30:8983/solr/NCSTOX/select?indent=on&q=ToxKeywords:%22genotoxicity%22%20AND%20ToxKeywords:%22ames%22%20OR%20ToxKeywords:%22micronucleus%22&wt=json and i got : http://130.88.150.30:8983/solr/NCSTOX/select?indent=on&q=ToxKeywords:"genotoxicity" AND ToxKeywords:"ames" OR ToxKeywords:"micronucleus"&rows=10&wt=json';
document.getElementById('textQuery').addEventListener('change', function(e) {
console.log(this.value);
})
<form method="post" name="query">
<label for="textQuery">Choose Query from list</label>
<select class="form-control space" name="textQuery" id="textQuery">
<option selected disabled>Choose here</option>
<option value="ToxKeywords:">ToxKeywords</option>
<option value="Molecules.Main_name:">Molecule</option>
<option value="Query1">Query 1</option>
<option value=ToxKeywords:systemic toxicity>Query 2</option>
<option value=ToxKeywords:"phototoxicity">Query 3</option>
<option value=ToxKeywords:"llna">Query 4</option>
</select>
</form>
I want to change multiple select buttons's values with another select button.
Practically when someone select an option in the main select button, the other select buttons must change with that value.
EDIT: I added the code, the first is the main select button and after I select somethig there, it should change in the others.
<select class="select_format">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
Thanks.
Since you didn't supply code here's a guess:
$(".myTriggerButton").on("click", function() {
$(".buttonToChangeValue").each(function() {
this.value = "new value";
});
});
$('.select_format').change(function(){
$('.format_imgs').val( $(this).val() );
});
https://jsfiddle.net/7hno0ob8/1/
I have developed a site with multiple select elements in the same form
<select>
<option value="">Select ...</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Carrot</option>
<option value="4">Orange</option>
<option value="5">Pear</option>
</select>
There are 8 selects with the exact same options on the page.
The user wants to copy and paste the selected values of a select from one to another.
The end user initiates it by using Ctrl+C, Ctrl+V. The web app was written to replace an excel app which allows copy and paste by the end user
However an html select doesn't support copy and paste. (Ctrl+C, Ctrl+V)
What can I do?
Any plugin that can maybe do this? Any minimal autocomplete select to suggest that looks like the standard select?
Edit:
Using the datalist example can be a solution. Only problem is that it allows invalid text i.e. text that is not one of the select options (apart from nothing) to be typed in. How do I only allow valid text?
See #Hashbrown answer in Copy selected item's text from select control html question. Sure it would help you as it's partially match your question.
Also you can take a look on How do I copy to the clipboard in JavaScript? as it has a lot of info related to your question.
Good Luck!
You should use datalist and handle none valid input as follow:
$('input[list]').on('change', function() {
var options = $('option', this.list).map(function() {
return this.value
}).get();
if (options.indexOf(this.value) === -1) {
this.value = "";
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input list="food1" name="food1" placeholder="Select...">
<datalist id='food1'>
<option disabled>Select ...</option>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Carrot">Carrot</option>
<option value="Orange">Orange</option>
<option value="Pear">Pear</option>
</datalist>
<input list="food2" name="food2" placeholder="Select...">
<datalist id='food2'>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Carrot">Carrot</option>
<option value="Orange">Orange</option>
<option value="Pear">Pear</option>
</datalist>
Try using datalist
<input list="foods" name="food">
<datalist id='food'>
<option value="1">Select ...</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Carrot</option>
<option value="4">Orange</option>
<option value="5">Pear</option>
</datalist>
http://www.w3schools.com/tags/tag_datalist.asp
Set the "value" attribute of one select to that of another with
document.getElementById('[select element1]').value = document.getElementById('[select element2]').value;
You can put this in the onClick handler for a button if you want.
Try this code
var src=document.getElementById('src');
var des=document.getElementById("des");
var opt=document.createElement("Option");
opt.value = src.options[src.selectedIndex].value;
opt.text = src.options[src.selectedIndex].text;
des.options.add(opt);
See the datalist element: http://www.w3schools.com/tags/tag_datalist.asp
It is used like this:
<input list="browsers" name="browserselect" type="text"/>
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
The list attribute of the input element tells the input element to use the datalist with that id.
<select name="a" id="a">
<option value="1">abc</option>
</select>
<select name="b" id="b">
<option value=""></option>
</select>
<script type="text/javascript">
$('select#a').on('change',function(){
var v = $(this).val();
$('select#b').val(v);
});
</script>
I want to get the <option> values and text from a <select> element #myselect, and add it to another <select> element #newselect. The value and text passed to the second select element, #newselect, must also be disabled. I'd like support for IE 8+.
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
Take the above, disable them and add them to the below:
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
<option disabled value="1">Red</option>
<option disabled value="2">Orange</option>
<option disabled value="3">Yellow</option>
</select>
Since you included the jQuery tag, here's a jQuery solution.
As long as you're using jQuery 1.x, IE8 support is included.
$('#myselect option').each(
function() {
$(this).prop('disabled', true).appendTo('#newselect');
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
</select>
You already have jQuery answer. So now if you are curious how it can be in pure javascript, here it is. As you can see, it's a little more verbose of course:
var mySelect = document.getElementById('myselect'),
newSelect = document.getElementById('newselect');
while (mySelect.options.length) {
mySelect.options[0].disabled = true;
newSelect.add(mySelect.options[0]);
}
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
</select>