Javascript onchange event. select/option html dropdown input - javascript

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

Related

javascript getting drop down box value

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();

How to change/set value in kendo combobox

Can anyone let me know how can we change the value of kendo combobox dynamically.
Fiddle is here - http://jsfiddle.net/ashwyn/yL6w3/1/
In the above fiddle, when we click on click then the shown value should be changed to three (for eg.)
I found this link which list all datasource methods -
http://www.kendoui.com/documentation/framework/datasource/methods.aspx
If you know the value you want, you can also do:
$("#MyComboBox").data("kendoComboBox").value(id);
working demo http://jsfiddle.net/Bxsge/2/ or http://jsfiddle.net/Bxsge/1/ (behavior for demo when you will click on the link the select will change to three selected value.)
selects by jQuery object // selects by index combobox.select(1); // selects item
link: http://www.kendoui.com/documentation/ui-widgets/combobox/methods.aspx
Hope this helps, :)
code
$(function(){
var CB = $("select").kendoComboBox();
$("a").click(function(){
var $cbx = $("select").data("kendoComboBox")
$cbx.select(2);
});
});
​

Adding input in jQuery and problem adding several input with a click

Why after a click on add, adding several input together?
I want once times add input in each click on add.
you see yourself : my code
Try this js fiddle I think I have done wat you wanted.
http://jsfiddle.net/539LR/6/
Here is the js code
$('a.add_input').live('click', function (e) {
e.preventDefault();
var $column = $(this).closest("div.column");
var input = $column.prev("div.column").clone().wrap("<div />").parent().html();
$column.before($(input));
});
This is probably what you want. It grabs a column, duplicates it, sets the input to "" and inserts it before the "add" button
http://jsfiddle.net/n4YFK/1/
Use var input = $(".ai_service").find(":eq(0)").html(); instead. See http://jsfiddle.net/539LR/4/ for reference

drop down list changed

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.

How to add more options in Javascript dependent options?

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);
}

Categories