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.
Related
I don't know if my title is well understanding, but what i want to do it's to display a list in option of a select element depending of the choice of another select element. I'm using this with a jsp page and with a Map variable to have the differents lists.
The jsp page look like this:
<form:select id="typeIndice1" path="typeIndice" itemLabel="libelle" onchange="run()">
<form:options items="${listeIndices}" />
</form:select>
<form:select id="indices" path="indice" itemValue="valeur" itemLabel="libelle" >
</form:select>
The model attribute is "listeIndices" which is a Map with key, the data to display on the second select, and value, the wording of the data. I know normally i should do the reverse for the Key, Value but is to display the wording easily on the first select.
I have this script below:
<script>
function run(){
var select = document.getElementById("typeIndice1");
var input = document.getElementById("indices");
var option = document.createElement("option");
option.text = select.value;
input.options.add(option);
}
When an option is selected on the first select, the run function create a new option to the second select whit the value of the first select, i have the complete list in only one option, but i would like each row in one option but i don't know how to do.
i also tried:
option.items = select.value;
instead of
option.text = select.value;
But i have a blank option.
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 select2 list and a set of external buttons. I wanted to click the external buttons and unselect corresponding items in the select2 list. I know I can do item selection from external value using the command
$("#external_btn").click(function() {
$("#select2").val("CA").trigger("change");
});
So when I click on the "external_btn" button, the "ca" item will be selected on the select2.
But how I can do item unselection? Thanks.
There does not appear to be a built-in function to programmatically deselect/unselect an option from a multiple-select Select2 control. (See this discussion.)
But you can get the array of selected values, remove the value from the array, and then give the array back to the control.
Select2 v4:
The following code works for Select2 v4. It also works for Select2 v3 as long as the control is backed by a <select> element, rather than a hidden input element. (Note: When using Select2 v4, the control must be backed by a <select> element.)
var $select = $('#select');
var idToRemove = 'c4';
var values = $select.val();
if (values) {
var i = values.indexOf(idToRemove);
if (i >= 0) {
values.splice(i, 1);
$select.val(values).change();
}
}
JSFiddle for Select2 v4
JSFiddle for Select2 v3
Select2 v3:
The following code works for Select2 v3, regardless of whether you back the control with a <select> element or a hidden input element.
var $select = $('#select');
var idToRemove = 'c4';
var values = $select.select2('val'),
i = values.indexOf(idToRemove);
if (i >= 0) {
values.splice(i, 1);
$select.select2('val', values);
}
JSFiddle for Select2 v3, using <select> element
JSFiddle for Select2 v3, using hidden input element
As you've indicated in your question, you can modify the state of the underlying select element and then trigger a change. So then you can simply deselect an option in the same way you might with a regular select.
Assuming an option of value "val", the following code would deselect it:
$("#select option[value=val]").prop("selected", false) // deselect the option
.parent().trigger("change"); // trigger change on the select
http://jsfiddle.net/9fD2N/3/
I don't see anything to "deselect" an element. But, you can get the list of currently selected elements, remove your element and then set the value.
http://jsfiddle.net/wLNxA/
$("#e8_2").select2({
placeholder: "Select a state"
});
$('#removeBtn').click(function () {
// get the list of selected states
var selectedStates = $("#e8_2").select2("val"),
index = selectedStates.indexOf('NV'); // we're removing NV, try to find it in the selected states
if (index > -1) {
// if NV is found, remove it from the array
selectedStates.splice(index, 1);
// and set the value of the select to the rest of the selections
$("#e8_2").select2("val", selectedStates);
};
});
It's works.
$('{SELECTOR}').val('').trigger('change')
If you do not have any other event listener action on select option better :
$("#select2").val("CA").attr('checked', 'checked'); // to check
$("#select2").val("CA").removeAttr('checked'); // to un-check
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 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);
}