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);
}
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 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();
I have OpenLayers.Control.NavToolbar that is working fine.
But I need to unselect a PANTOOL and select the ZOOMTOOL instead.
Is there any function to do that?
Should be something like
enter code here
// var bar = your_ol_control_navtoolbar
bar.controls[0].deactivate();
bar.controls[1].activate();
hope, it helped
Use activateControl method to choose control to active.
var navToolbar = new OpenLayers.Control.NavToolbar()
navToolbar.activateControl(navToolbar.controls[0]); //will choose PANTOOL
// If you want to choose another control.
// Just change the index at navToolbar.controls[0]
var inputDrop = document.createElement('select');
inputDrop.setAttribute("onchange", function test(){alert("test");});
form.appendChild(inputDrop);
var inputOpt1 = document.createElement('option');
inputOpt1.value="1";
inputOpt1.innerHTML="1";
inputDrop.appendChild(inputOpt1);
var inputOpt2 = document.createElement('option');
inputOpt2.value="2";
inputOpt2.innerHTML="2";
inputDrop.appendChild(inputOpt2);
form.appendChild(inputDrop);
I need to assign somekind of event handler to select dropdown input field with a number of options. I need to execute a function whenever a different option is selected. The above doesnt work and neither does inputDrop.onchange="alert('test')"; not sure what im doing wrong here, please could someoneadvise?
thanks.
Pete. What you're looking for is something like
inputDrop.addEventListener('change', function() {
alert("PETE'S TEST"); });
I put together a jsFiddle to demonstrate this working: http://jsfiddle.net/pbaXP/1/
This seems to be working
inputDrop.onchange = function test(){alert("test");};
Working demo here
in my application I need to check if a drop down list has changed or not. can you please let me know how I should write it?
if (document.form.dropdownlist.???)
I don't know what to write instead of ????
You could give this dropdownlist an unique id:
<select name="foo" id="foo">
...
</select>
and then subscribe for the onchange event (make sure you make the subscription once the DOM is loaded, for example in the body onload method):
var ddl = document.getElementById('foo');
ddl.onchange = function() {
alert('the value has changed');
};
var count=3;
function check()
{
var obj =new Array();
obj=document.getElementById("list");
checkLength(obj.length);
}
function checkLength(len)
{
if(len>count)
{
alert("Drop down size changed");
}
}
Take three option elements in select element.
Call the method check() using onchange() to get the size of drop down list.
The variable count is used to store the drop down list size .
So that it can be used to check if drop down list is changed.