Someone helped me with this earlier, but there is one problem and I already closed that question. I do not want to use JQuery. The following code works, it allows you to search a dropdown menu:
<html>
<head>
<script type="text/javascript">
function searchSel()
{
var input = document.getElementById('realtxt').value.toLowerCase(),
len = input.length,
output = document.getElementById('realitems').options;
for(var i=0; i<output.length; i++)
if (output[i].text.toLowerCase().slice(0, len) == input)
output[i].selected = true;
if (input == '')
output[0].selected = true;
}
</script>
</head>
<body>
<form>
search <input type="text" id="realtxt" onkeyup="searchSel()">
<select id="realitems">
<option value="">select...</option>
<option value="1">Power hungry</option>
<option value="2">Super man</option>
<option value="3">Hyperactive</option>
<option value="4">Bored</option>
<option value="5">Human</option>
</select>
</form>
</body>
</html>
Here is the problem.
It is only limited to the matching first letters of the first word. So if you typed in Super for Super Man, it would work. But if you typing with Man it will not show. Is there a way to make it match the whole string for a matching value? Thanks.
I have created a fiddle please check.
http://jsfiddle.net/wLzs4/3/
I have used the indexOf javascript function for your case.
function searchSel()
{
var input = document.getElementById('realtxt').value.toLowerCase();
len = input.length;
output = document.getElementById('realitems').options;
for(var i=0; i<output.length; i++)
if (output[i].text.toLowerCase().indexOf(input) != -1 ){
output[i].selected = true;
break;
}
if (input == '')
output[0].selected = true;
}
Related
I have tried several methods only to discover that the usual str.length code is not reading the entire form field contents
Html:
<select id="states1" name="states[]" multiple="multiple">
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="CA">CA</option>
</option>
No matter how many states I select, the javascript only reads the first state selected. For example, if I have selected all 3 states, the only validation checks that work are found below:
<script>
var slen = document.forms[0].elements['states1'];
function invoice_() {
if(slen.value == "AL"){
alert('true');
return false;
} }
</script>
And to check the length
<script>
var slen = document.forms[0].elements['states1'];
function invoice_() {
if(slen.value.length == 2){
alert('true');
return false;
} }
</script>
In other words, even if the actual length of the form field contents is 6, the only way I have found to check the string length in javascript only returns 2, in my example, because it only reads the first selected state but not the others
I have tried
slen.value.options.length
slen.options.length
To get the right number, but those methods don't work.
How do I get the code to read the entire form field contents to count the length when it is a select multiple option field with multiple options selected?
You can use the .selectedOptions property to get the selected options in the multiple select. Then convert it to an Array, and do a .map().reduce() to total up the values.
var totalLen = Array.from(document.forms[0].states1.selectedOptions)
.map(v => v.value.length)
.reduce((sum, n) => sum + n, 0);
console.log(totalLen);
<form>
<select id="states1" name="states[]" multiple="multiple">
<option value="AL" selected>AL</option>
<option value="AK">AK</option>
<option value="CA" selected>CA</option>
</select>
</form>
If you wanted all the options instead of just the selected ones, then use the .options property instead.
var totalLen = Array.from(document.forms[0].states1.options)
.map(v => v.value.length)
.reduce((sum, n) => sum + n, 0);
console.log(totalLen);
<form>
<select id="states1" name="states[]" multiple="multiple">
<option value="AL" selected>AL</option>
<option value="AK">AK</option>
<option value="CA" selected>CA</option>
</select>
</form>
This was the best solution for someone who might need it:
let uvs = document.forms[0].elements['states1'];
function invoice_() {
var result = [];
var options = uvs && uvs.options;
var opt;
for (var i=0, iLen=options.length; i<iLen; i++) {
opt = options[i];
if (opt.selected) {
result.push(opt.value || opt.text);
}
}
var nst = (result.push(opt.value || opt.text)) - 1;
if(nst > 3){
alert('');
return false;
}
For some reason the raw count of 'result.push(opt.value || opt.text' is +1, so I just added a little math to make the count accurate. I was initially looking to count the number of characters, but finding the number of states selected was even better. Instead of a result of 10 for 5 states I get 5 for 5 states.
The other character count code above was too unstable. Might be a browser issue, hard to say.
I want to output to multiple elements using JavaScript. The following example may show what i want.
<select id="leave" onchange="leaveChange()">
<option value="">Select</option>
<option value="150">EMS</option>
<option value="350">DHL</option>
<option value="200">UPS</option>
<option value="75">Ethiopia Postal</option>
</select>
<script>
function leaveChange() {
if (document.getElementById("leave").value == document.getElementById("leave").value){
document.getElementsByClassName("item_shipping")[0].innerHTML = document.getElementById("leave").value;
}
else{
document.getElementById("item_shipping").innerHTML = 0;
}
}
</script>
<div class="item_shipping"></div> //this is getting value
<div class="item_shipping"></div> //this i empty i want the same value?
The first div show the result but the second one is empty. How do I update both?
function leaveChange() {
var leaveValue = document.getElementById("leave").value;
var shippingItems = document.getElementsByClassName("item_shipping");
for (var i = 0; i < shippingItems.length; i++) {
if (leaveValue == leaveValue) // ??
shippingItems[i].innerHTML = leaveValue;
else
shippingItems[i].innerHTML = 0;
}
}
I need your help.
I am a newbie to javascript and I am unsure as to how I would go about searching for a specified option in a select box and then selecting it
HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<select id="select1">
<option value="apples">apples</option>
<option value="oranges">oranges</option>
<option value="bananas">bananas</option>
<option value="mangos">mangos</option>
<option value="pears">pears</option>
</select>
</body>
</html>
ie.
lookup("select1","mangos")
javascript logic:
function lookup("selectid","stringtosearchfor") {
look through the selected "selectid" and find the string "mangos"
if found { select mangos from the select box }
}
How do you code that ?
Thanks in advance,
This is easier than you think... try:
document.getElementById('select1').value = 'mangos';
function lookup(id, value)
{
var ret = undefined;
if(document.getElementById(id) != undefined)
{
var options = document.getElementById(id).childNodes;
for(i = 0; i < options.length; i++)
{
if(options[i].value == value)
{
ret = options[i];
break;
}
}
}
return ret;
}
Via Jquery:
$('#select1').val('mangos');
In an HTML page i have severals list.
<select name="salut-1358937506000-OK">
<option selected="" value="OK">OK</option>
<option value="OK">NOK</option>
</select>
<select name="salut-1358937582000-OK">
<option selected="" value="OK">OK</option>
<option value="OK">NOK</option>
</select>
...
In javascript, I want to get all select/option list which started by "salut-".
For theses list, i want to compare his name and his selected value.
I know it is possible in jQuery but can't use jquery, only javascript (JSNI with GWT exactly).
Have you an idea?
Thanks!
var selects = document.getElementsByTagName('select');
var sel;
var relevantSelects = [];
for(var z=0; z<selects.length; z++){
sel = selects[z];
if(sel.name.indexOf('salut-') === 0){
relevantSelects.push(sel);
}
}
console.log(relevantSelects);
You can use the getElementsByTagName function to get each SELECT name, for example:
var e = document.getElementsByTagName("select");
for (var i = 0; i < e.length; i++){
var name = e[i].getAttribute("name");
}
Then you can use the following code to get each OPTION for the SELECT, to do any necessary comparisons:
var options = e[i].getElementsByTagName("option")
I'm integrating Postcode anywhere with my web project. I'm using a drop drop for the county/state field. Postcode anywhere returns the name of the County. Can I change the Selected Index when I only have the name? (I'm using a number for the value field which relates to a database field).
I tried the following:
var f = document.getElementById("state_dropdown");
f.options.[f.selectedIndex].text = response[0].County;
I've tried to include the drop down code html here but I can't get it to work properly for some reason.
But of course this just changes the text field for the item in the drop down that is already selected.
I can query the database and find out what ID I have assigned the county but I'd rather not if there is another way.
Loop over the options until you have a match:
for (var i = 0; i < f.options.length; i++) {
if (f.options[i].text == response[0].Country) {
f.options.selectedIndex = i;
break;
}
}
Demo.
I would make a function and loop over the labels:
See: http://jsfiddle.net/Y3kYH/
<select id="country" name="countryselect" size="1">
<option value="1230">A</option>
<option value="1010">B</option>
<option value="1213">C</option>
<option value="1013">D</option>
</select>
JavaScript
function selectElementByName(id, name) {
f = document.getElementById(id);
for(i=0;i<f.options.length;i++){
if(f.options[i].label == name){
f.options.selectedIndex = i;
break;
}
}
}
selectElementByName("country","B");
Just a variation on other answers:
<script type="text/javascript">
function setValue(el, value) {
var sel = el.form.sel0;
var i = sel.options.length;
while (i--) {
sel.options[i].selected = sel.options[i].text == value;
}
}
</script>
<form>
<select name="sel0">
<option value="0" selected>China
<option value="1">Russia
</select>
<button type="button" onclick="setValue(this, 'Russia');">Set to Russia</button>
<input type="reset">
</form>