I have an editable table, whatever we change it is updated in the database.
I want something like a select option from the dropdown list and it should be added in the table cell
I want something Like this.
When we select an option from dropdown it should be set as td(cell) value
I finally achieve this by using javascript.
<script>
$('select').change(function() {
var $this = $(this);
$this.parent().siblings('td[id^=row-]').html($this.val());
});
</script>
<table><tr><td> <select id="select1">
<option value="$">--Please Select--</option>
<option value="val1">value 1</option>
<option value="val2">value 2</option>
<option value="val3">value 3</option>
</select></td>
<td id="row-1"></td></tr></table>
Related
I have a drop-down box in HTML showing three options. I am also using javaScript and want to use the getElementById tool to connect the two. However, I only have one ID for the drop-down box. How does javascript recognize that I have three different options?
There's actually a demo on w3schools.com showing exactly what you're asking. To get the number of options, you could do something like
document.getElementById("mySelect").options.length
Here is an example of how to retrieve the value of a dropdown: https://jsfiddle.net/ykcwgnm8/
You use getElementBy* functions to get the element, however value attribute denotes which item is currently selected.
HTML:
<select id="dropdown">
<option value="1">First option</option>
<option value="2">Second option</option>
<option value="3">Third option</option>
</select>
JS:
function onChangeHandler(e)
{
alert("you have selected item with value "+this.value);
}
document.getElementById("dropdown").addEventListener("change", onChangeHandler);
You can listen for change like this
var list = document.getElementById("mySelect")
list.addEventListener('change', function(e){
console.log(e.target.selectedIndex)
console.log(e.target.options[e.target.selectedIndex].text)
})
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
You can do something like this, here is an example:-
html
<select id="selectBox">
<option value="1">option 1</option>
<option value="2" selected="selected">option 2</option>
<option value="3">option 3</option>
</select>
js
var e = document.getElementById("selectBox");
var selectedValue = e.options[e.selectedIndex].value;
// this will give selectedValue as 2
Hope you find this useful!!
I have a number of dropdowns (like dozens) arranged in rows in a table with same name and square brackets (objects[]) so that I can have their values as an array when posted.
<tr 1>
<select name="objects[]">
<option value='Choice 1'>Choice 1</option>
<option value='Choice 2'>Choice 2</option>
</select>
</tr>
<tr 2>
<select name="objects[]">
<option value='Choice 1'>Choice 1</option>
<option value='Choice 2'>Choice 2</option>
</select>
</tr>
Question
When I change the value of a drop-down, using jquery/js is it possible to uniquely identify which drop-down's value is changed from this set of drop-downs? i.e to get the index of the drop-down.
Use Case is to populate a text field next to the changed drop-down in the same row and as they all share the same name with [] I want to identify which one is changed to update text field at the correct place.
Thanks.
There is no need to get the index of the element, we can watch for change using the .on() function, we attach it to all the select elements, then we get the value using .val() and set the same to the adjacent input we find using .next function.
//optional code - for initalization
$('select').each(function(){
$(this).next( "input" ).val($(this).val());
});
//optional code - for initalization
$('select').on("change", function(){
$(this).next( "input" ).val($(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr 1>
<select name="objects[]">
<option value='Choice 1'>Choice 1</option>
<option value='Choice 2'>Choice 2</option>
</select>
<input type="text"/>
</tr>
<tr 2>
<select name="objects[]">
<option value='Choice 1'>Choice 1</option>
<option value='Choice 2'>Choice 2</option>
</select>
<input type="text"/>
</tr>
I'm populating multiple select with a webservice.
This web service is returning the selected value.
Well, at the moment to render them, I have 2 different select
<select id='select1'>
<option value='1'>Option 1</option>
<option value='3'>Option 3</option>
</select>
<select id='select2'>
<option selected="selected" value='A'>Option A</option>
<option value='B'>Option B</option>
</select>
Well, the first select hasn't any selected attribute and the second one has it.
When I execute:
$("select1").find("option:selected").val(); //Returns 1
$("select2").find("option:selected").val(); //Returns A
How I can identify when the select has an option really selected?
Instead of using :selected which looks for the selected state, you can look for [selected], which will check for the selected attribute.
var $selectedOption = $("#select1 option[selected]");
if ($selectedOption.length) {
//option selected
console.log(selectedOption.val() + " selected.");
} else {
//no option selected
console.log("Nothing selected.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='select1'>
<option value='1'>Option 1</option>
<option value='3'>Option 3</option>
</select>
<select id='select2'>
<option selected="selected" value='A'>Option A</option>
<option value='B'>Option B</option>
</select>
You can use the has() jQuery method to find the select that has an option with the selected attribute.
$("select").has("option[selected]")
$("#select1").has("option[selected]").val() // undefined
$("#select2").has("option[selected]").val() // "A"
I'm building a WordPress site that uses Custom Posts and Custom Fields to show a vehicle inventory. I would like the visitor to be able to filter the posts by Taxonomies...
The plugin I use for drilling the available Taxonomies (Query Multiple Taxonomies) outputs all options it can find for that particular Taxonomy into a dropdown list.
To prevent the dropdown list (i.e. Model) to become too long, I would like to show only those options that are based on the previous selection.
So when the visitor selects Vehicle = Cars, the dropdown for Manufacturer should only show the car manufacturers. When the visitor selects a manufacturer, i.e. Ford, the next dropdown for selecting a model should only show the models available for the previous selected manufacturer, in this case Ford...
The labels and level-0 values don't change but when I add or change a manufacturer or model, the level-1 and/or level-2 changes.
Not that important but, if possible, it would also be nice to strip everything not needed to show up in the "filtered" dropdown. In case of the Manufacturer dropdown, level-0 and all the spaces are not needed. In case of the Model dropdown, level-0, level1 and all the spaces are not needed after selection.
I can do some simple things with JavaScript but this is not simple to me, sorry... ;-)
I searched for tips and examples and tried to make it work but no luck.
Can someone please help me to figure out how to do this in jQuery?
Here is the code,
<label for="qmt-vehicle">Vehicle:</label>
<select id="qmt-vehicle" name="vehicle">
<option></option>
<option class="level-0" value="cars">Cars</option>
<option class="level-0" value="motorcycles">Motorcycles</option>
</select>
<label for="qmt-manufacturer">Manufacturer:</label>
<select id="qmt-manufacturer" name="manufacturer">
<option></option>
<option class="level-0" value="cars">Cars</option>
<option class="level-1" value="ford"> Ford</option>
<option class="level-1" value="chevrolet"> Chevrolet</option>
<option class="level-0" value="motorcycles">Motorcycles</option>
<option class="level-1" value="honda"> Honda</option>
<option class="level-1" value="yamaha"> Yamaha</option>
</select>
<label for="qmt-model">Model:</label>
<select id="qmt-model" name="model">
<option></option>
<option class="level-0" value="cars">Cars</option>
<option class="level-1" value="ford"> Ford</option>
<option class="level-2" value="model-1-ford"> Model 1</option>
<option class="level-2" value="model-2-ford"> Model 2</option>
<option class="level-2" value="model-3-ford"> Model 3</option>
<option class="level-1" value="chevrolet"> Chevrolet</option>
<option class="level-2" value="model-1-chevrolet"> Model 1</option>
<option class="level-2" value="model-2-chevrolet"> Model 2</option>
<option class="level-2" value="model-3-chevrolet"> Model 3</option>
<option class="level-0" value="motoren">Motorcycles</option>
<option class="level-1" value="honda"> Honda</option>
<option class="level-2" value="model-1-honda"> Model 1</option>
<option class="level-2" value="model-2-honda"> Model 2</option>
<option class="level-2" value="model-3-honda"> Model 3</option>
<option class="level-1" value="yamaha"> Yamaha</option>
<option class="level-2" value="model-1-yamaha"> Model 1</option>
<option class="level-2" value="model-2-yamaha"> Model 2</option>
<option class="level-2" value="model-3-yamaha"> Model 3</option>
</select>
You need to use javascript, or jquery.
Here is how I do it.
Get the class that is selected:
var levelClass = $('#qmt-manufacturer').find('option:selected').attr('class');
Then use the level class to hide or show
$('#qmt-model option').each(function () {
var self = $(this);
self.hide();
if (self.hasClass(levelClass)) {
self.show();
}
});
Edit:
to clarify how to use this:
it uses a slightly altered version of the code
$(function(){
$("#qmt-vehicle").on("change",function(){
var levelClass = $('#qmt-vehicle').find('option:selected').attr('class');
console.log(levelClass);
$('#qmt-manufacturer option').each(function () {
var self = $(this);
if (self.hasClass(levelClass) || typeof(levelClass) == "undefined") {
self.show();
} else {
self.hide();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="qmt-vehicle">Vehicle:</label>
<select id="qmt-vehicle" name="vehicle">
<option></option>
<option class="car" value="cars">Cars</option>
<option class="motorcycle" value="motorcycles">Motorcycles</option>
</select>
<label for="qmt-manufacturer">Manufacturer:</label>
<select id="qmt-manufacturer" name="manufacturer">
<option></option>
<option class="car" value="cars">Cars</option>
<option class="car" value="ford"> Ford</option>
<option class="car" value="chevrolet"> Chevrolet</option>
<option class="motorcycle" value="motorcycles">Motorcycles</option>
<option class="motorcycle" value="honda"> Honda</option>
<option class="motorcycle" value="yamaha"> Yamaha</option>
</select>
There is another way to achieve this --- Check this Fiddle example: Fiddle
You can learn from this example and add according logic which you need for the third option box.
jQuery Code:
$('#qmt-vehicle').on('change', function () {
//alert(this.value); // or $(this).val()
if (this.value == 'cars') {
$("#qmt-manufacturer").html(
"<option class=\"level-1\" value=\"ford\"> Ford</option><option class=\"level-1\" value=\"chevrolet\"> Chevrolet</option>");
} else {
$("#qmt-manufacturer").html(
"<option class=\"level-1\" value=\"honda\"> Honda</option><option class=\"level-1\" value=\"yamaha\"> Yamaha</option>");
}
});
A Javascript might help you...
You can add an "onchange" event (in Javascript) in your "select" component. Also, add an ID for the labels.
Example:
<label for="qmt-manufacturer" id="lblManufacturer">
<select id="qmt-manufacturer" name="manufacturer"
onchange="changeManufacturer(this.value);">
Using a script tag, build your method in javascript as following:
<script type="text/javascript">
function changeManufacturer(manufacturerValue){
switch(manufacturerValue){
case ford:
document.getElementById('lblManufacturer').innerHTML = 'FORD';
break;
case chevrolet:
document.getElementById('lblManufacturer').innerHTML = 'Chevrolet';
break;
}
// And so on for other values...
}
</script>
this code above changes the Label Text running time, implement it to make changes in your second dropdown (Model)
Hope it helps you.
This code looks at if dropdownlist with 'townid' has an option of Central and then puts Central after the first option at all dropdownlists.
var central = $('#townid option:contains("Central")');
if(central){
central.insertAfter('select option:first-child');
}
My problem is that:
How can I add it just after dropdownlist that has id of townid? I mean something like:
var central = $('#townid option:contains("Central")');
if(central){
central.insertAfter('#townid select option:first-child');
}
For example:
<select id=townid>
<option value="5000">AL</option>
<option value="5001">NY</option>
<option value="5002">LA</option>
<option value="5003">NY</option>
<option value="5204">Central</option>
<option value="5024">FA</option>
</select>
<select id="someid">
<option value="3002">Brooklyn</option>
<option value="6001">Manhattan</option>
</select>
After that process they should be seem like:
<select id=townid>
<option value="5000">AL</option>
<option value="5204">Central</option>
<option value="5001">NY</option>
<option value="5002">LA</option>
<option value="5003">NY</option>
<option value="5024">FA</option>
</select>
<select id="someid">
<option value="3002">Brooklyn</option>
<option value="6001">Manhattan</option>
</select>
How can I add it just after dropdownlist that has id of townid?
Okay, I’m gonna assume your HTML looks something like this:
<select id="townid">
<option>
…
</option>
</select>
In that case, you could use:
$('#townid option:contains("Central")').appendTo('#townid option');
If there are multiple option elements inside #townid and you only want to select the first, just change the selector:
$('#townid option:contains("Central")').appendTo('#townid option:first');
In your example, don’t use if (central), use if (central.length) instead.
You just messed up the selector, because #townid IS the select tag.
var central = $('#townid option:contains("Central")');
if(central.length === 1){
central.insertAfter('#townid option:first-child');
}