I have a table with dynamically created rows, on each row I want to have 2 dropdowns/selects that are dependent on each other.
I have found 2 fiddles, the first is the exact output i want but the code is confusing and uses json. the second code is the easiest to understand but is not dynamic. Is there a way to make them work together?
// http://jsfiddle.net/C2xsj/5/ <----- this is the output i want but the code is kinda confusing for me
// https://jsfiddle.net/fwv18zo1/ <--- this has the simpler code
lets assume this is my table:
<INPUT type="button" value="Add Row" id="button"/>
<form id="myForm">
<TABLE id="addTable" >
<TR><TD>
<select id="selectCategory">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
</TD>
<TD>
<select id="selectSubCategory" >
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
</TD></TR>
</TABLE>
</form>
when someone clicks the add row button, it creates a new row
using something similar to this all the options are coded into this function such as ():
$('#button').click(function() {
var table = $('#addTable');
table.append('<tr><td data-label="Task"><select class="ui fluid search dropdown" required><option value="1">Fruit</option><option value="2">Animal</option><option value="3">Bird</option><option value="4">Car</option></select><select class="ui fluid search dropdown" required><option value="1">Banana</option><option value="1">Apple</option><option value="1">Orange</option><option value="2">Wolf</option><option value="2">Fox</option><option value="2">Bear</option><option value="3">Eagle</option><option value="3">Hawk</option><option value="4">BWM<option></select></tr>');
}
so my issue is that since they cant all have the same id such as the ones in the fiddle, how i make the pair of selects on each row dependent
Here i used clone function. read comment on JS to know more.
$(document).on("change",".select1",function(){
var thisParent = $(this).parents("tr"); // detect the parent of the select1.
$(".select2",thisParent).find('option[value]').addClass('hidden'); // hide all option values.
$(".select2",thisParent).find('option[value="' + this.value + '"]').removeClass('hidden'); // show only values that match the 'select1' value.
});
$(".addNew").click(function(){ // clone button
$(".cloneThis").clone().appendTo("tbody"); // clone the class 'cloneThis' and append it into tbody.
$("tr:last").removeClass("cloneThis"); // remove 'cloneThis' class from the last appended child, so you can clone it again from the original one.
$("button:last").removeClass("addNew").addClass("removeThis").html("Remove"); // replace 'Add' with 'Remove' and add class 'removeThis' to be able to remove this tr.
});
$(document).on("click",".removeThis",function(){ // remove function.
$(this).parents("tr").remove(); // find this button parent and remove it.
});
table{
width:100%;
}
select, button{
width:30%;
}
.hidden{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="cloneThis">
<td>
<select name="select1" class="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" class="select2">
<option>Select type first</option>
<option value="1" class="hidden">Banana</option>
<option value="1" class="hidden">Apple</option>
<option value="1" class="hidden">Orange</option>
<option value="2" class="hidden">Wolf</option>
<option value="2" class="hidden">Fox</option>
<option value="2" class="hidden">Bear</option>
<option value="3" class="hidden">Eagle</option>
<option value="3" class="hidden">Hawk</option>
<option value="4" class="hidden">BWM<option>
</select>
<button class="addNew">Add</button>
</td>
<tr>
</tbody>
</table>
Related
I have many filter button like below, how can I get the select value without using its id?
<select name="selectId" id="selectId" multiple
class="selectpicker required form-control" data-live-search="true">
<option value="All" selected>All</option>
<option value="1" selected>1</option>
<option value="2" selected>2</option>
</select>
<select name="selectStore" id="selectStore" multiple
class="selectpicker required form-control" data-live-search="true">
<option value="All" selected>All</option>
<option value="A" selected>Store A</option>
<option value="B" selected>Store B</option>
</select>
<select name="selectProduct" id="selectProduct" multiple
class="selectpicker required form-control" data-live-search="true">
<option value="All" selected>All</option>
<option value="apple" selected>Apple</option>
<option value="orange" selected>Orange</option>
</select>
Normally, I will use this code to find the changed select button:
$(document).ready(function() {
// Get filter function for chart
$('#selectId').change(function() {
var select = $("#selectId").val();
if (selectLength >= 1 && select.includes("All")) {
$('.selectpicker#selectId').selectpicker('deselectAll');
makeChart();
}
else {
makeChartFilter(select);
}
})
});
But the problem is when there are many filter buttons, I have to write many functions like above and just only change the id.
How can I just use something like this:
$(document).ready(function() {
// Get filter function for chart
$('#selectpicker').change(function() {
id_change = something;
var select = $("#id_change").val();
...
})
});
Using vanilla JavaScript and the eventTarget, this is relatively straight forward. Here is an example:
document.getElementById('container').onchange = ({ target }) => {
console.log(target.value);
};
<form id="container">
<select name="foo">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="bar">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</form>
I'm trying to understand why when I select <select> and targeting any option
it return select-one . why -one? can it be in some cases counting more or sth else so naming convention have a useful meaning ?
in the code below I'm comparing between input and select maybe they'r not relevant but looks interesting.
$('input[type="checkbox"],input[type="radio"]').on("change",function(event){
console.log(event.target.type);
});
$('#foo,#foo2').on("change",function(event){
console.log(event.target.type);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="select">
<input type="radio" name="select">
<select id="foo">
<option value="1">Value1</option>
<option value="2">Value2</option>
</select>
<select id="foo2">
<option value="1">Value1</option>
<option value="2">Value2</option>
</select>
It's to distinguish from the case of when you add the multiple optional attribute to the select. It will then return select-multiple.
multiple
This Boolean attribute indicates that multiple options can be selected in the list. If it is not specified, then only one option can
be selected at a time. When multiple is specified, most browsers will
show a scrolling list box instead of a single line dropdown
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
$('input[type="checkbox"],input[type="radio"]').on("change",function(event){
console.log(event.target.type);
});
$('#foo,#foo2').on("change",function(event){
console.log(event.target.type);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="select">
<input type="radio" name="select">
<select id="foo">
<option value="1">Value1</option>
<option value="2">Value2</option>
</select>
<select id="foo2" multiple>
<option value="1">Value1</option>
<option value="2">Value2</option>
</select>
I need help on something really simple.
I have 2 dropdown boxes on a form:
<select name="OfficeLocation" >
<option value="" ></option>
<option value="1" selected="selected">New York</option>
<option value="2" >Los Angeles</option>
<option value="3" >San Francisco</option>
</select>
<select name="OfficePhone">
<option value="" ></option>
<option value="1">(718)555-1212</option>
<option value="2" >(213)555-1212</option>
<option value="3" >(415)555-1214</option>
</select>
The second one is "Read Only"
All I need to know is how can I change the value of "OfficePhone" by changing the value of "OfficeLocation"? using either a simple JavaScript or JSP Command
Thanks
You are able to use a script like the following:
<script>
menu1 = document.getElementsByName('OfficeLocation')[0];
menu2 = document.getElementsByName('OfficePhone')[0];
menu1.onchange = function(){
menu2.value = menu1.value;
}
</script>
Here you are using the onchange event to initiate a function that make the value on the second menu menu2 equals to the selected value of the first menu menu1.
An online demo is here
Notice that: the script should be placed after your elements.
You gonna need an event handler function for the OfficeLocation select and an id for the second select.
<select name="OfficeLocation" onchange="eHandler">
<option value="" ></option>
<option value="1" selected="selected">New York</option>
<option value="2" >Los Angeles</option>
<option value="3" >San Francisco</option>
</select>
<select name="OfficePhone" id="oPhone">
<option value="" ></option>
<option value="1">(718)555-1212</option>
<option value="2" >(213)555-1212</option>
<option value="3" >(415)555-1214</option>
</select>
You have to implement your event handler in your script, like this:
function eHandler(){
var secondSelect = document.getElementById('oPhone');
secondSelect.value = //the value you want to be selected
}
I'm new posting here, have visited several times over the years to read every ones ideas.
My issue is I have a form with 2 select boxes, second one populated with values upon selection in the first. The second holds a url value which you got to upon submit.
This function works perfectly using the onchange but on submit only the first of the second select list urls work. I can swap them but only the first works, all the others only pass the primary url followed by a crosshatch '#'.
<script>
$(document).ready(function($){
$("#category").change(function() {
$('select[name="product"]').removeAttr("name").hide();
$("#" + $(this).val()).show().attr("name", "product");
});
/* ' This works on all
$(".product").change(function() {
document.location = $(this).val();
});
*/
/* this only passes url on first product option list else passes opening url + #*/
$('#discover').submit(function() {
document.location = $(".product").val();
return false;
});
});
</script>
<div id="discover-box">
<form id="discover" method="post">
<fieldset>
<p class="category">
<label class="title">Category:</label>
<select id="category" name="category">
<option value="#" selected="selected">Choose category</option>
<option value="accommodation">Accommodation</option>
<option value="food">Food</option>
<option value="explore">Explore</option>
</select>
<p><label>Sub-Category:</label>
<select id="accommodation" name="product" class="product">
<option value="#" selected="selected">Choose sub-category</option>
<option value="accommodation_category.asp?o=1&c=1">Motels</option>
<option value="accommodation_category.asp?o=2&c=2">Camping, Caravan & Holiday Parks</option>
<option value="accommodation_category.asp?o=3&c=3">B&B, Self-Contained Houses & Cottages</option>
<option value="accommodation_category.asp?o=4&c=4">Hotels</option>
<option value="accommodation_category.asp?o=5&c=5">Backpackers & Group Accommodation</option>
<option value="accommodation_category.asp?o=6&c=6">National Parks</option>
</select>
<select id="food" style="display:none" name="product" class="product">
<option value="#" selected="selected">Choose sub-category</option>
<option value="food_wine_category.asp?o=1&t=1&c=1">Restaurants & Cafes</option>
<option value="food_wine_category.asp?o=2&t=1&c=2">Pubs</option>
<option value="food_wine_category.asp?o=3&t=1&c=3">Bakeries & Takeaway</option>
<option value="food_wine_category.asp?o=4&t=1&c=4">Local Produce</option>
<option value="food_wine_category.asp?o=5&t=2&c=1">Mount Gambier Wine Region</option>
<option value="food_wine_category.asp?o=5&t=2&c=2">Other Limestone Coast Wine Regions</option>
</select>
<select id="explore" style="display:none" name="product" class="product">
<option value="#" selected="selected">Choose sub-category</option>
<option value="explore_category.asp?o=1">Top 10</option>
<option value="explore_category.asp?o=2">Arts, Crafts, Galleries & Museums</option>
<option value="explore_category.asp?o=3">Heritage, Antiques & Collectables</option>
<option value="explore_category.asp?o=4">Family Fun</option>
<option value="explore_category.asp?o=5">Caves & Sinkholes</option>
<option value="explore_category.asp?o=6">Parks & Gardens</option>
<option value="explore_category.asp?o=7">Walks & Drives</option>
<option value="explore_category.asp?o=8">Kanawinka Geotrail</option>
<option value="explore_category.asp?o=9">Retail</option>
<option value="explore_category.asp?o=10">Recreation, Leisure & Adventure</option>
</select>
</p>
<p class="buttons">
<input type="image" src="images/submit-red.png" Value="submit">
</p>
</fieldset>
</form>
</div>
because $(".product").val(); will find first occurrence of DOM having class product so in any case it will fetch first one... u can do this using
$('#discover').submit(function() {
document.location = $('select[name="product"]').val();
return false;
});
Open Fiddler (fiddler2.com) and watch the post go past. I find that generally when more than one control on a page uses the same name, the browser actually passes all of them, but the server-side framework expecting each post parameter to be unique, ignores all but the last one.
when you submit , you have only one select box with attribute name ,so you can select the selected value by that attribute
$('#discover').submit(function() {
document.location = $('select[name="product"]').val();
return false;
});
Here is what I've started to do: http://jsfiddle.net/nd9ny/
For now it doesn't work as I want it to.
I want to update options each time when a new select input is added or an input is removed.
For example, we have our first select input with these options:
<select>
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
</select>
When I add new input to my page, I want my function to update all the inputs and to remove the newly selected option from them.
<select>
<option value="1" selected></option>
<option value="3"></option> // The second one is removed
<option value="4"></option>
</select>
<select>
<option value="2" selected></option> // The first one is removed
<option value="3"></option>
<option value="4"></option>
</select>
And then, If I remove the first input, the second one becomes:
<select>
<option value="1"></option>
<option value="2" selected></option>
<option value="3"></option>
<option value="4"></option>
</select>
Pure Javascript code needed.
You may try the following solution:
- CSS:
.hidden {
display: none;
}
- JS function:
function hide_selected(el) {
var index = el.selectedIndex;
// Show every options
for(var i=0; i<el.length; i++)
el[i].className="";
// Hide the selected one
el[index].className="hidden";
}
- HTML example:
<body>
<select onchange="javascript:hide_selected(this);">
<option value="1" class="hidden" selected="selected">1</option>
<option value="2" class="">2</option>
<option value="3" class="">3</option>
<option value="4" class="">4</option>
</select>
</body>
Note: This function was tested with Firefox, you may have to check if this works with other browsers.
Hope this helps