I have a basic HTML form list:
<select name="sites" id="sites">
<option value="http://www.google.com">Google</option>
<option value="http://www.bing.com">Bing</option>
<option value="http://www.yahoo.com">Yahoo</option>
</select>
I want to be able to assign a string to a variable depending on the user section, e.g. if Google is selected the JS var 'link' equals 'abc'.
I understand how to assign the value to the variable, but not sure on assigning a string of text.
Would this be along the lines of a if statement;
if sites = 'http://www.google.com' then var link = 'abc'?
You need to check onchange event, then it's simply:
var select = document.getElementById('sites');
var str;
sites.onchange = function() {
str = this.value;
alert(str);
}
http://jsfiddle.net/oLz2wkLb/
Related
Suppose I have a dropdown as
<select name="Countries" id="Countries">
<option value="USA">United States of America</option>
<option value="AUS">Australia</option>
</select>
Suppose on load of a page I get a sample text as "Australia" then I want to get its respective value as "AUS"
I want to get dropdown value from its label.
Would be something like this:
var e = document.getElementById("Countries");
var str = e.options[e.selectedIndex].value;
Thanks to everyone who helped me here.
Below is the solution to get label from the selected value of a droddown.
var e = document.getElementById("Countries");
var str = e.options[e.selectedIndex].innerHTML;
http://jsfiddle.net/mm18qrwd/1/
I think you don't have index of selected element,
hence,
var value = "";
Array.prototype.slice.
call(document.
getElementById("Countries").
options).
forEach(function(option){
if(option.text == "Australia") {
value = option.getAttribute("value")
}
})
alert(value);
if you are using JQuery, this code $('#Countries').val() will return what you want.
i want to get the value of this td
my code
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);
and bang it does Nothing, what could be the problem?
the html srry for not post it in the begging
<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>
You could use
var e = document.getElementById("td.body-c_hardware.cell-c_hardware");
var str = e.innerHTML;
To use getElementById, your tag needs an id
<table>
<tr><td id="idValue">Content</td></tr>
</table>
and you need to fetch it by just using the id value
document.getElementById('idValue');
If you want to use CSS-like selectors, you may be best using a toolkit like jQuery
jQuery('#idValue');
jQuery('td.className');
jQuery('table.tableClass td.cellClass');
You need to get the select element by its id. You can then access either the text of the option or the value of the option. I think you may want the value instead of the text. I have posted a solution for both ways.
http://jsfiddle.net/c4eWg/1
var e = document.getElementById('ticket_category_clone');
alert(e.options[e.selectedIndex].innerHTML);
If you want the actual value, and not the text then use this instead. I suspect it might be what you want.
var e = document.getElementById('ticket_category_clone');
alert(e.value);
First, I have this input in a form.
<select id="entry_14">
<option value="Woman">Woman</option>
<option value="Man">Man</option>
</select>
Then I declared this variable.
var mygender = document.getElementById('entry_14').value;
but then, when I document.write, it already shows "Man" before the user even makes a selection, and after selecting woman, it still shows man.
How can I set the value of this variable to change, each time the user selects one of the options?
It executes immediately because your code is not in a function. You need to call this function when the select changes. Add an onchange handler to your select. In this example I pass this.value which is your select lists value to the function. Finally you can do whatever you want with that value.
<select id="entry_14" onchange="myfunction(this.value);">
<option value="Woman">Woman</option>
<option value="Man">Man</option>
</select>
<script>
function myfunction(val) {
document.write(val);
}
</script>
Declare a onchange event handler.
document.getElementById('entry_14').onchange = function(){
var mygender = this.value;
document.write(mygender);
}
Add a onChange JS handler to the <select> element. The example below shows an inline way of doing this...
<select id="entry_14" onChange="updateMyGender();">
....
</select>
<script>
var mygender = document.getElementById('entry_14').value;
function updateMyGender()
{
mygender = document.getElementById('entry_14').value;
}
</script>
I think you are looking for this
var mygender= document.getElementById('entry_14');
var gender= mygender.options[mygender.selectedIndex].value;// for value
var gender= mygender.options[mygender.selectedIndex].Text;//for text
Good morning/afternoon,
Not so much a problem but more of a query. If I have the following code to grab hold of the users selection on a drop-down box (see figure 1), how do I also add the ability to also grab the value of a specific attribute? (see figure 2)
Figure 1:
<select onChange="productString(this.value)">
<option selected>Please Choose an Option</option>
<option value="Foo"></option>
</select>
Figure 2:
<select onChange="productString(this)">
<option selected>Please Choose an Option</option>
<option value="Foo" id="Bar"></option>
</select>
If anyone would be so kind as too show me where I am going wrong in figure 2 it would be greatly appreciated.
Thanks in advance,
Dan.
EDIT:::::
Would the following work it collecting the information?
function productString(element) {
var id = element.value;
var name = element.id;
var box = element.class;
}
Just pass though this:
<select onChange="productString(this)">
and then you can get whatever you want:
function productString(element) {
var value = element.value, id = element.id;
// ...
}
Here is a sample jsfiddle.
edit — oops sorry - the element that's being passed through is, in IE everywhere (gee I must be blind), the "select" element, not the "option". Thus:
function productString(element) {
if (element.tagName.toLowerCase() === 'select')
element = element.options[element.selectedIndex];
var id = element.id;
var value = element.value;
// ...
}
Updated jsfiddle.
I have this HTML dropdown:
<form>
<input type="text" id="realtxt" onkeyup="searchSel()">
<select id="select" name="basic-combo" size="1">
<option value="2821">Something </option>
<option value="2825"> Something </option>
<option value="2842"> Something </option>
<option value="2843"> _Something </option>
<option value="15999"> _Something </option>
</select>
</form>
I need to search trough it using javascript.
This is what I have now:
function searchSel() {
var input=document.getElementById('realtxt').value.toLowerCase();
var output=document.getElementById('basic-combo').options;
for(var i=0;i<output.length;i++) {
var outputvalue = output[i].value;
var output = outputvalue.replace(/^(\s| )+|(\s| )+$/g,"");
if(output.indexOf(input)==0){
output[i].selected=true;
}
if(document.forms[0].realtxt.value==''){
output[0].selected=true;
}
}
}
The code doesn't work, and it's probably not the best.
Can anyone show me how I can search trough the dropdown items and when i hit enter find the one i want, and if i hit enter again give me the next result, using plain javascript?
Here's the fixed code. It searches for the first occurrence only:
function searchSel() {
var input = document.getElementById('realtxt').value;
var list = document.getElementById('select');
var listItems = list.options;
if(input === '')
{
listItems[0].selected = true;
return;
}
for(var i=0;i<list.length;i++) {
var val = list[i].value.toLowerCase();
if(val.indexOf(input) == 0) {
list.selectedIndex = i;
return;
}
}
}
You should not check for empty text outside the for loop.
Also, this code will do partial match i.e. if you type 'A', it will select the option 'Artikkelarkiv' option.
Right of the bat, your code won't work as you're selecting the dropdown wrong:
document.getElementById("basic-combo")
is wrong, as the id is select, while "basic-combo" is the name attribute.
And another thing to note, is that you have two variable named output. Even though they're in different scopes, it might become confusing.
For stuff like this, I'd suggest you use a JavaScript library like jQuery (http://jquery.com) to make DOM interaction easier and cross-browser compatible.
Then, you can select and traverse all the elements from your select like this:
$("#select").each(function() {
var $this = $(this); // Just a shortcut
var value = $this.val(); // The value of the option element
var content = $this.html(); // The text content of the option element
// Process as you wish
});