I want to get the selected value from a dropdown box.
Then I want to use that value to change the background-image.
The two code snippits I think are useful:
document.observe("dom:loaded",function(){
initialize();
addTextboxes();
var sel = document.getElementById("select");
for(i = 0; i < pieces.length; i++) {
pieces[i].observe("click",function(event){
moveThis(event.toElement.innerHTML-1);
});
pieces[i].style.backgroundImage = sel.value;
}
var e = document.getElementById("select");
alert(e.options[e.selectedIndex].value);
var value = document.getElementById("select").value;
alert(value);
});
function addTextboxes(){
var sel = document.createElement("select");
//Add the options
sel.options[sel.options.length] = new Option("text0","url(luigi1.jpg)");
sel.options[sel.options.length] = new Option("text1","url(luigi2.jpg)");
sel.options[sel.options.length] = new Option("text2","url(luigi3.jpg)");
sel.options[sel.options.length] = new Option("text3","url(luigi4.jpg)");
//add the element to the form
document.getElementById("overall").appendChild(sel);
}
I have already put two alerts in it to test if something happens, but they don't even show up.
Also, when I place the forloop in the addTextboxes() function, then it changes the background to the first selected option, but doesn't change when you change the box.
I see a few things that need to be changed in your code.
You can't use getElementById("select") without giving an element the select id. Ids are different from tag types, and must be unique throughout your whole page. In the fiddle below, I'm using 'mySelect' for this, to avoid confusion.
You shouldn't listen for a click event on each option. Instead, you should listen for the change event on the entire select element. After a change, the value of the select element will be the value of the option that was chosen.
Here's a fiddle with these changes
After making those changes, the value of chosen option is now displayed in an alert box.
From here, you'd be able to change the background image, or do anything else.
With the use of jQuery its simply this line here
$( "#selectbox option:selected" ).text();
That will get the text of the selected option, you could always get the value using this method:
$( "#selectbox option:selected" ).val();
Related
I have a drop down(dropddown2) which is displayed using a json object:
listData:[{id:"1",label:"lbl1"},{id:"2",label:"lbl2"}]
When I select a value in dropddown1, I need to add a value to the dropdown2 list and display it. I think I am able to push the data, but I cannot see it on UI.
On dropdown1, you'll need to add an event listener for the onchange event that triggers a function where you can capture the selected value and add a new value to the other dropdown.
You can do something like this:
<select id="carsSelector" onchange="addToSelector();">...</select>
function addToSelector() {
var val = document.getElementById('carsSelector').value;
var selector = document.getElementById('addSelector');
var option = document.createElement("option");
option.text = val;
selector.add(option);
}
Here's a fiddle showing this.
I've got three dropdown menu's which are dynamically filled from the database each time I select an option in the previous dropdown menu.
Now I want to access the values in these dropdown menu's, so that I can build a SQL-query somewhere later.
I've used the following code to access the HTML elements:
$( window ).load(function(){
var e = document.getElementById("slctTable");
var slctTableValue = e.value;
console.log(slctTableValue);
});
This code only works the first time the page loads, so when I mess around with the dropdown menu's, nothing changes.
What I want now, is that each time I select a value in the dropdown menu, it updates the slctTableValue variable.
Bind change event to the drop-down with jquery, then this event will fire whenever there is a change happened on the selected value.
$("#slctTable").change(function() {
var slctTableValue = $(this).val();
console.log(slctTableValue);
});
You can detect change event like this and update value:
document.getElementById('slctTable').addEventListener('change',function(){
var e = document.getElementById("slctTable");
var slctTableValue = e.value;
console.log(slctTableValue);
});
I have a select with all options following this format (a,b,c,d).
E.g. '1000, Balance, 0, 4'.
The dropdown menu (which is actually in some cases a popup window with a searchable/filterable list) should show the options as shown in the above example, but when an option has been selected, the actual select box should only show the first value.
E.g. '1000'.
How would you go about doing this? I'm using javaScript and jQuery along with the html. Don't worry about extracting the right value to show, I basically just want to know how to set the shown value to something else than the actual value.
I have a method that returns the value I want to display (e.g. '1000'), so I would like to do something similar to
$("#selectID").val("1000");
The options are added like this:
for (var i = 0; i < this.dataTable().Rows().length; i++) {
var option = document.createElement("option");
option.text = this.getDataTableText(this.dataTable().Rows()[i]).replace(/\s{2,}/g, '');
option.value = this.getDataTableText(this.dataTable().Rows()[i]).replace(/\s{2,}/g, '').split(",")[0];
sel.options.add(option, (i));
}
So I would just like to set the shown value to the value of the option rather than the text.
I am trying to load options into a select element when the user focuses.
Here is the jquery code I'm using:
$('select').focus(function() {
var $this = $(this);
if (!$this.data('hasitems')) {
var selectedValue = $this.val();
$this.empty()
.append($('<option></option')
.attr('value','')
.text('Loading...'));
// This would usually be the result of an AJAX call
$this.empty()
.data('hasitems','true');
$.each(['a','b','c','d'], function(index,item) {
$this.append($('<option></option>')
.attr('value',item)
.text(item)
.prop('selected', selectedValue == item));
});
}
});
Here is the fiddle:
http://jsfiddle.net/agnnC/
The solution almost works... except in Firefox (and sometimes not in Chrome either, although the fiddle I put together does appear to work).
The problem in Firefox is that when the user clicks on the select element, the currently selected value is not remembered and is changed to one of the new values in the drop down.
Can anyone think of a workaround?
I think the issue is that the selected attribute is not really a property the way you are using it. Per the MDN doc:
selected
If present, this Boolean attribute indicates that the option is
initially selected. If the element is the descendant of
a element whose multiple attribute is not set, only one single
of this element may have the selected attribute.
Note, it talks about "initially selected" only, not real time changes. It also refers to selected only as an attribute, not a property.
The W3C spec for the option element also talks only about pre-selecting an option, not about making live changes using the selected attribute.
Once the select and options are live, the .selectedIndex property on the <select> object controls which option is selected in real time for single selection select elements.
In support of this theory, if you change to setting the saved item with .selectedIndex as shown below, the problem goes away:
$('select').focus(function() {
var $this = $(this);
if (!$this.data('hasitems')) {
var selectedValue = $this.val();
$this.empty()
.append($('<option></option')
.attr('value','')
.text('Loading...'));
// This would usually be the result of an AJAX call
$this.empty()
.data('hasitems','true');
$.each(['a','b','c','d'], function(index,item) {
$this.append($('<option></option>')
.val(item)
.text(item));
if (selectedValue == item) {
$this.prop("selectedIndex", index);
}
});
}
});
Working demo: http://jsfiddle.net/jfriend00/4333d/
Firefox can't change the focus option when select is opening, but you can change before it open, change the event to mousedown it working Fiddle
$('select').mousedown(function() {
// ...
});
I want to add more dropdown options in this file:
http://parseven.com/java_ex.html
Now it has two and I want to make three more. Third option must be dependent on second option and so on.
Please advise me. Thanks in advance.
Where is the data coming from? I'm not sure which part of the answer you need most:
You need to add an event handler to the OnChange event of the first dropdown.
In the event handler, you need to get the data from somewhere (AJAX?)
Then you need to take the new data and add it to the second dropdown.
Here is basically what you do:
document.getElementById('dropdown1').onchange = yourFunction;
function yourFunction() {
//Here is where you need to get the data
//Then you need to add them to the other dropdown like this:
var dropdown2 = document.getElementById('dropdown2');
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
dropdown2.options.add(optn);
}