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');
Related
Hello how can I select the value of Business by using the emplStatus2 GORM object?
<select name="emplStatus2" onchange="swapFieldsets(this.value, '#sa-email', '#sa-password')" class="form-control" id="emplStatus2">
<option value="Home">Send via Home Email</option>
<option value="Business">Send via Business Email</option>
<option value="Password">Set a password now,provide access information offline</option>
If you use jquery you can do it like this
$("#emplStatus2").val("Business")
if you only want javascript i think its something like this:
document.getElementById("emplStatus2").options.value = "Business"
please describe detail what you need.
You can check value
function swapFieldsets(elem) {
if (elem.value.toLowerCase() === 'business') {
alert(elem.value)
}
}
On fiddle https://jsfiddle.net/xw0pLmod/
If you want to select an item using pure javascript, you can use :
SelectOption3();
function SelectOption3() {
var sel = document.getElementById('select1');
var val = 'option3';
for(var i = 0, j = sel.options.length; i < j; ++i) {
if(sel.options[i].getAttribute("value") === val) {
sel.selectedIndex = i;
break;
}
}
}
<select id="select1">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
You need something like this:
var test = '';
for (var i = 0; i < document.getElementById("emplStatus2").options.length; i++) {
if (document.getElementById("emplStatus2").options[i].value === 'Business') {
test = document.getElementById("emplStatus2").options[i].innerText;
}
}
alert(test);
Here is JsFiddle of your example: https://jsfiddle.net/p457utLL/
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;
}
}
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;
}
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>
Can any one give me a sample code that gets the selected value from an existing combo box?
I have this code but its not doing anything:
function check ()
{
var e = document.getElementById("ticket_category_clone");
var str = e.options[e.selectedIndex].text;
alert(str);
if (str==="Hardware")
{
SPICEWORKS.utils.addStyle('#ticket_c_hardware_clone{display: none !important;}');
}
}
SPICEWORKS.app.helpdesk.ready(check);
heres a img of the code
and the code
<select id="ticket_category_clone" name="ticket[category]" hdpp="ticket_category">
<option value=""></option><option value="Hardware">Hardware</option>
<option value="Software">Software</option>
<option value="Rede" selected="selected">Rede</option>
<option value="Pedidos">Pedidos</option>
<option value="Formação/Dúvida">Formação/Dúvida</option>
<option value="Outro">Outro</option><option value="#edit_categories#">Edit Categories...</option></select>
what i want its find a way to get the selected value fo that combobox
There is an unnecessary hashtag; change the code to this:
var e = document.getElementById("ticket_category_clone").value;
I use this
var e = document.getElementById('ticket_category_clone').value;
Notice that you don't need the '#' character in javascript.
function check () {
var str = document.getElementById('ticket_category_clone').value;
if (str==="Hardware")
{
SPICEWORKS.utils.addStyle('#ticket_c_hardware_clone{display: none !important;}');
}
}
SPICEWORKS.app.helpdesk.ready(check);
It probably is the # sign like tho others have mentioned because this appears to work just fine.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<select id="#ticket_category_clone">
<option value="hw">Hardware</option>
<option>fsdf</option>
<option>sfsd</option>
<option>sdfs</option>
</select>
<script type="text/javascript">
(function check() {
var e = document.getElementById("#ticket_category_clone");
var str = e.options[e.selectedIndex].text;
alert(str);
if (str === "Hardware") {
alert('Hi');
}
})();
</script>
</body>