Is there a way I can get the length of list options in a select-dropdown HTML input tag? The list changes dynamically and I need to calculate the total number of options within the drop-down. The total options are generated dynamically, so I need a way to calculate number of option tags within an html select tag. I also need to do this in pure JS because the app I am working with will not allow me to use JQuery. (Please don't argue that with me unless there is absolutely no way to do this in pure JS.)
Needs only to be compatible with Internet Explorer.
I assume this will have to do with accessing the DOM, but I am not sure how exactly the syntax will work out.
Since you didn't specify that you could use jQuery, try this:
HTML:
<select id="test">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
JavaScript:
document.getElementById("test").options.length
example
Select the options from the select input, then count them with length
$("#input1 option").length
i did this Using JQuery
$(document).ready(function() {
$("button").click(function(){
var optionLength = $("#user option").length;
alert("length of options is : "+optionLength);
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Get length of list Options</title>
</head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<body>
<select id="user" multiple="" size="5" class="form-control" id="participants" name="participants" style="height: 98px !important;">
<option value="1">S RAJ</option>
<option value="2"> SHARMA</option>
<option value="3">SINGH</option>
<option value="4"> ROY</option>
<option value="5">VERMA</option>
<select>
<button type="button">Get Users</button>
</body>
</html>
Try this:
In the HTML file:
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
In the JavaScript file:
document.getElementById("mySelect").length;
<select id="lister-sort-by-options" name="sort" class="lister-sort-by">
<option value="0" selected="selected">
Movies
</option>
<option value="1">
TV Shows
</option>
<option value="2">
Morning Shows
</option>
<option value="3">
Moonlight
</option>
<option value="4">
Music
</option>
</select>
Related
good day. See the code below. I have 4 languages. I want to add a link to each languages, so as to access a new page every time I choose the language from the combo. How can I do this?
<!-- FLAGS -->
<div class="language-picker js-language-picker" data-trigger-class="btn btn--subtle js-tab-focus">
<form action="" class="language-picker__form">
<label for="language-picker-select">Select your language </label>
<select name="language-picker-select" id="language-picker-select">
<option lang="de" value="deutsch">Deutsch</option>
<option lang="en" value="english" selected>English</option>
<option lang="fr" value="francais">Français</option>
<option lang="it" value="italiano">Italiano</option>
</select>
</form>
</div>
<!-- FLAGS -->
For example, I change this line, add a link. But is not working.
<option lang="de" value="deutsch" Deutsch </option>
You can do this with onchange event that will be trigred with each change
<select onchange="if (this.value) window.location.href=this.value">
<option value="">Pick one:</option>
<option value="/de">Deutsch</option>
<option value="/fr">Français</option>
</select>
I am trying to get the title attribute from a selected Option in a Select menu. I have spent over a day on this and I am seeking help. I found a couple of ways to use the value attribute but now I need to use the title attribute somewhere else on the page.
Here is my current attempt although I have been through many iterations. I have listed two possible scripts although only one will eventually be used. The first possible script might include Jquery and if it does and it can be used here, can you translate it into Javascript, as I am not good at either? Do I have the elements in the correct order?
<select id="amount_id" onclick="function()">
<option value="" disabled="disabled">Amount</option>
<option value="0" title="None">0</option>
<option value="1" title="One Quarter">1/4</option>
<option value="2" title="One Half">1/2</option>
<option value="3" title="Three Quarters">3/4</option>
<option value="4" title="All">100%</option>
</select>
<textarea id="displayTitle"></textarea>
<script>
$(document).ready(function(){
$(document).on('click','#amount_id',function(){
var result = $("option:selected",this).attr('title');
$("#displayTitle").text(result);
});
});
</script>
OR
<script>
function run(){
document.getElementById("displayTitle").value =
document.getElementById("amount_id").value;}
</script>
Thank you.
Here is a JavaScript alternative of the first code :
<select id="amount_id">
<!-- removed onclick -->
<option value="" disabled>Amount</option>
<option value="0" title="None">0</option>
<option value="1" title="One Quarter">1/4</option>
<option value="2" title="One Half">1/2</option>
<option value="3" title="Three Quarters">3/4</option>
<option value="4" title="All">100%</option>
</select>
<textarea id="displayTitle"></textarea>
<script>
document.getElementById("amount_id").addEventListener('change',function(){
var eTitle = this.options[this.selectedIndex].getAttribute('title');
document.getElementById("displayTitle").value = eTitle;
});
</script>
EDIT: Ok, I really want to get this so I've decided to simplify what I need. I have one textbox that onclick updates a textfield. Now, what I need it to do is when they click on a second dropdown it will update a portion of text in the same textfield. Hope this helps.
<script type="text/javascript"><!--
function OnSelectionChanged(listBox) {
var textInput = document.getElementById("dn");
textInput.value = listBox.value;
}
//--></script>
</head>
<body>
<ul id="menu">
</ul>
<div id="main" class="view">
<h1>Text</h1>
<div id="intro"><h5>Text</h5>
<div id="content"><h2>Text:</h2>
<p>Text</p>
</div>
<form method="POST" action="submit" name="myForm"><fieldset>
<legend>Text</legend>
<label>[?]
Disposition Code<br />
<select size="1" name="disposition" id="drp_dwn" onchange="OnSelectionChanged (this)">
<option value="-1" selected>——Select one——</option>
<option value="Text ">190</option>
<option value="191">191</option>
<option value="192">192</option>
<option value="195">195</option>
<option value="270">270</option>
<option value="300">300</option>
<option value="340">340</option>
<option value="350">350</option>
<option value="370">370</option>
<option value="380">380</option>
<option value="381">381</option>
<option value="382">382</option>
<option value="383">383</option>
<option value="384">384</option>
<option value="400">400</option>
<option value="401">401</option>
<option value="402">402</option>
<option value="403">403</option>
</select>
</label>
<label>[?]
Cause Code<br />
<select size="1" name="cause">
<option value="-1" selected>——Select one——</option>
<option value="">Cause - 190</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
</label><br /><br />
<label><!--[?] -->
Disposition Narrative
<textarea id="dn" rows="8" cols="30" name="dn"></textarea>
</label>
Im still getting used to how stack overflow wants us to format the code but hopefully you guys can read it well enough to help find a solution. Thanks again.
All I can really give you at this point is
Attach onchange handlers to your drop downs. Your handlers will
add/replace the text.
Use regular expressions to replace text when dd2 and dd3 change.
If you can provide more details about the text you want to replace then someone will be able to help you with your regular expressions.
I am new to AJAX and PHP, and I have this code:
<head>
<script type="text/javascript">
function crimeselect(){
var select = document.getElementById("crime").value;
}
</script>
</head>
<body>
<select name="crime" id="crime" onChange="crimeselect();">
<option value="CVPerson">Crimes VS Person</option>
<option value="CVMO">Crimes VS Moral and Order</option>
</select>
<select id="CVPerson" onchange="">
<option>Homicide</option>
<option>Kidnapping</option>
</select>
<select id="CVMO" onchange="">
<option>Alarm and Scandal</option>
<option>Assault/Resistance to Authority</option>
</select>
</body>
What I want is, when I choose "Crimes VS Person", the select option with an id of "CVPerson" would only be the one to appear and the select option with an id of "CVHO" would not be appeared. Same also if i choose "Crimes VS Moral and Orders".
I don't know how to do it. Any tips please.
<head>
<script type="text/javascript">
function crimeselect(){
document.getElementById(document.getElementById("crime").value).style.visibility = 'visible';
}
</script>
</head>
<body>
<select name="crime" id="crime" onChange="crimeselect();">
<option value="CVPerson">Crimes VS Person</option>
<option value="CVMO">Crimes VS Moral and Order</option>
</select>
<select id="CVPerson" onchange="" style="visibility:hidden;">
<option>Homicide</option>
<option>Kidnapping</option>
</select>
<select id="CVMO" onchange="" style="visibility:hidden;">
<option>Alarm and Scandal</option>
<option>Assault/Resistance to Authority</option>
</select>
</body>
I need to make a portion of the text in a form select option label a different color to help it stand out. Anything with a () needs to be red for example. Is this even remotely possible?
<select id="product" name="product" onchange="calculatetotal();">
<option value="5">1-4 years ($5)</option>
<option value="10">5-9 years ($10)</option>
<option value="15">10+ years ($15)</option>
</select>
Ok so I've made something for you, tested and runs on Firefox 15.1 pretty well, but surely you'll have trouble for cross-browser : My Fiddle
HTML
<select id="product" name="product" onchange="calculatetotal();">
<option value="5" class="red">1-4 years</option>
<option value="10" class="red">5-9 years</option>
<option value="15" class="red">10+ years</option>
</select>
CSS
option.red:nth-child(1):after{
content: "($5)";
color: red;
}
option.red:nth-child(2):after{
content: "($10)";
color: red;
}
option.red:nth-child(3):after{
content: "($15)";
color: red;
}
If you want to style the whole line, you can do that in CSS.
If you want to style only a portion of the text you can not do it. You would need to use a custom control.
Using JQuery, Try:
$("select option:contains('(')").css("color", "red");
Here's the example code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<select id="product" name="product" onchange="calculatetotal();">
<option value="5">0-1 years</option>
<option value="5">1-4 years ($5)</option>
<option value="10">5-9 years ($10)</option>
<option value="15">10+ years ($15)</option>
</select>
<script>
$("select option:contains('(')").css("color", "red");
</script>
</body>
</html>
Extending upon Mr. Alien's answer above:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
option:after{
content: attr(data-price);
color: red;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<select id="product" name="product" onchange="calculatetotal();">
<option value="0" data-price="">0-1 years</option>
<option value="5" data-price=" ($5)">1-4 years</option>
<option value="10" data-price=" ($10)">5-9 years</option>
<option value="15" data-price=" ($15)">10+ years</option>
</select>
</body>
</html>
I'm not sure you can make only what's inside the "()" red. You can make the first "(" black by just including it by default, but I haven't been able to make the last ")" black again while keeping the price red.
Good luck