This is an example,
<select>
<option value=1>Cars</option>
</select>
How i can get the value of selected "1" and value in list box "Cars"?
try out this
<select id="selectID">
<option value=1>Cars</option>
</select>
using javascript
var e = document.getElementById("selectID");
var strUser = e.options[e.selectedIndex].value;
jQuery("#sltbox").find("option[value=1]").attr("selected","selected")
Give id as sltbox to your select tag.
Related
recently I have been trying to effectively parse values to a <selection> tag. For example, I have been trying:
/index.html?exampleId=examplevalue
Yet, this doesn't seem to be working. For added context, here is an example that replicates the structure of my <selection> tag:
<form method="GET">
<select id="CategorySelect" name="CategorySelect">
<option value="default">Select an Option</option>
<option value="dogs">Dogs</option>
<option value="cats">Cats</option>
<option value="horses">Horses</option>
<option value="otheranimals">Other animals</option>
</select>
</form>
If I understand your question correctly, you're trying to pre-fill form inputs based on the query string of the URL.
If so, first you need to parse the query String.
In this example I assign the result of an Immediately Invoked Function Expression to a variable named $_GET (after the variable with the same in PHP used to store the same information).
Inside the IIFE I split the query string by all occurences of ? or &, then loop through the results and split any non-falsey items by =. I assign the results of the final split to an object.
Finally return that object to the $_GET variable.
var $_GET = (function(s,o,a) {
return s.split(/\?|\&/g).forEach(function(i){i&&(a = i.split('='))&&(o[a[0]] = a[1]);}), o;
// split the query by ? or &; iterate the results; split each item by =; assign the result; return the object
})(location.search,{},[]);
Next you need to find elements with the correct names and set the values. So iterate the query object we just made; find all elements that have the correct name; iterate the elements' test the elements tag names so we know how to properly set the value.
This method will work even if there are multiple forms with similar elements on the same page.
// Loop through $_GET; Get a list of all nodes, and the value to set
for(var i in $_GET) (function(nodelist, value){
// Loop through the nodelist
for(var i in Object.keys(nodelist)) (function(el){
// If the element is an input element, set it's value
if(/input/i.test(el.tagName)) el.value = value;
// If the element is a select element, set the default option
if(/select/i.test(el.tagName)) el.querySelector('[value="'+value+'"]').selected = true;
})(nodelist[i]);
})(document.querySelectorAll('[name="'+i+'"]'), $_GET[i]);
Expand and run the following demo to see it in action.
var $_GET = (function(s,o,a) {
return s.split(/\?|\&/g).forEach(function(i){i&&(a = i.split('='))&&(o[a[0]] = a[1]);}), o;
// split the query by ? or &; split each item by =; assign the result; return the object
})("?fruit=banana&greeting=evening",{},[]);
// ^^ For demo purposes only, use location.search instead.
// Loop through $_GET; Get a list of all nodes, and the value to set
for(var i in $_GET) (function(nodelist, value){
// Loop through the nodelist
for(var i in Object.keys(nodelist)) (function(el){
// If the element is an input element, set it's value
if(/input/i.test(el.tagName)) el.value = value;
// If the element is a select element, set the default option
if(/select/i.test(el.tagName)) el.querySelector('[value="'+value+'"]').selected = true;
})(nodelist[i]);
})(document.querySelectorAll('[name="'+i+'"]'), $_GET[i]);
<form>
<select name="fruit">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="banana">Banana</option>
</select>
<select name="greeting">
<option value="morning">Good Morning</option>
<option value="afternoon">Good Afternoon</option>
<option value="evening">Good Evening</option>
</select>
</form>
<form>
<select name="fruit">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="banana">Banana</option>
</select>
<select name="greeting">
<option value="morning">Good Morning</option>
<option value="afternoon">Good Afternoon</option>
<option value="evening">Good Evening</option>
</select>
</form>
If you submit the form you will receive the values in $_GET (or $_POST depending on form method)
<?php
if(isset($_GET['CategorySelect'])){ // test if you have submitted something
echo $_GET['CategorySelect'];
}
?>
<form method="GET">
<select id="CategorySelect" name="CategorySelect">
<option value="">Select an Option</option>
<option value="dogs">Dogs</option>
<option value="cats">Cats</option>
<option value="horses">Horses</option>
<option value="otheranimals">Other animals</option>
</select>
<input type="submit" value="submit"><!-- to be able to submit your form -->
</form>
I have a select input with an option called "custom". So when the user selects "custom" from the list the value needs to be that of a corresponding text input box.
<select id="choice" >
<option value="">custom</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
<input id="custom_choice" />
The "custom" text doesn't need to change, just the value for when the data from the form is collected.
Any ideas?
Thanks
Here you go,
HTML
<select id="choice" onChange="javaScript:getIt(this)">
<option value="">custom</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
<input id="custom_choice" />
JavaScript
getIt = function(obj) {
var val = document.getElementById("choice").value;
//If you want to get value then user above line.
var innerhtml = obj.options[obj.selectedIndex].text;
document.getElementById("custom_choice").value = innerhtml;
}
FIDDLE
JavaScript would work best for this, something like this:
Bear in mind these would be two separate files:
var choice = document.getElementById("choice");
var custom_choice = document.getElementById("custom_choice").innerHTML = choice;
I think this may work but you would have to check it.
this is probably a very basic question, but I can't seem to figure it out.
In the code below you can see that I have a select-option block. It works fine. The only problem is that when I select one of the options (and get redirected to the corresponding page), the tick remains at the default value ("Sort...") of the select-option function.
<select name="sort" onchange="location = this.options[this.selectedIndex].value;">
<option value="">Sort...</option>
<option value="index.php?ascending=true">Preis aufsteigend</option>
<option value="index.php?descending=true">Preis absteigend</option>
</select>
When a user selects "Preis aufsteigend", I would like the tick to be displayed at the corresponding option in the field...
Can anybody help?
Thanks in advance!
You need to reverse your onchange function. On page load look for the url variable you set then select the appropriate option.
Script
var sel = document.getElementById('sort');
var opts = sel.options;
for(var opt, j = 0; opt = opts[j]; j++) {
if(window.location.search.indexOf(opt.value.split('?')[1]) > -1 ) {
sel.selectedIndex = j;
break;
}
}
HTML
<select id="sort" name="sort" onchange="location = this.options[this.selectedIndex].value;">
<option value="">Sort...</option>
<option value="index.php?ascending=true">Preis aufsteigend</option>
<option value="index.php?descending=true">Preis absteigend</option>
</select>
http://jsfiddle.net/t95wqm48/
I have a select menu with the weekdays. I would like this menu to have todays day selected. From W3Cschools, I got this simple code for getting an int for todays date:
var d = new Date();
var n = d.getDay();
This would output a 3, since it's wednesday. My problem here is to make the specific day in the list selected. Here is my code for the sropdown:
<div class="matmenu">
<select id="selectDagMat" ONCHANGE="location = this.options[this.selectedIndex].value;">
<option value="wilink/mandag">Måndag</option>
<option value="wilink/tisdag">Tisdag</option>
<option value="wilink/onsdag">Onsdag</option>
<option value="wilink/torsdag">Torsdag</option>
<option value="wilink/fredag">Fredag</option>
<option value="wilink/lordag">Lördag</option>
<option selected="selected" value="wilink/sondag">Söndag</option>
</select>
Also, an example of the page can be found here:
http://stilius.se/wilink/
Thanks in advance!
Do you mean like this: http://jsfiddle.net/xuPz2/1/ ? You get the element via getElementById and then you set the value.
I have a problem with my site. I have a select menu and 3 options: images, video and audio. When I click one of the options it should display a button to pick out the image/video/audio to upload, but this doesn't display in Google Chrome. In Firefox there is no problem with this. Does anyone have a solution for this?
Thanks very much!
EDIT:
This is the code
<select name="service_id">
<option value="video" onClick="showSection('video',['image','audio']);" <?=count($videos)?'selected="selected"':''?>>Video</option>
<option value="image" onClick="showSection('image',['video','audio']);" <?=count($images)?'selected="selected"':''?>>Imagini</option>
<option value="audio" onClick="showSection('audio',['video','image']);" <?=count($audios)?'selected="selected"':''?>>Audio</option>
</select>
things i modified:
the second parameter is now a class name, each value separated by a "|"
used onChange() to trigger a selection (but does not trigger unless the value changes)
used this to pass a reference to the select rather than passing values (you can do more this way)
demo here
<select name="service_id" onChange="showSection(this)">
<option value="video" class='image|audio'>Video</option>
<option value="image" class='video|audio'>Imagini</option>
<option value="audio" class='video|image'>Audio</option>
</select>
<script type="text/javascript">
function showSection(el){
//modified to get the first and second parameters of showSection()
//get the value
var firstParam = el.value;
//get the class name of the selected element, and split it
var secondparam = el.options[el.selectedIndex].className.split('|');
console.log(firstParam);
console.log(secondparam);
}
</script>
Call the function on select not in options:
<select onClick='showSection(this.value,"a")'>
<option value="video" >Video</option>
<option value="image">Imagini</option>
<option value="audio">Audio</option>
</select>
i have tested this in chrome its working alright.
one suggestion is if you are using dropdown then use onchange event rather then using onClick
<?php
$videos=0;
$images=0;
$audios=0;
?>
<select name="service_id">
<option value="video" onClick="showSection('video',['image','audio']);" <?=count($videos)?'selected="selected"':''?>>Video</option>
<option value="image" onClick="showSection('image',['video','audio']);" <?=count($images)?'selected="selected"':''?>>Imagini</option>
<option value="audio" onClick="showSection('audio',['video','image']);" <?=count($audios)?'selected="selected"':''?>>Audio</option>
</select>