I'm trying to select multiple options on the select box by clicking on different divs or table row.
I have a multiple select named #events.
I'm using the code below which is fully functional with a simple selectbox but not with a multiple one.
$("td.eventID").on("click", function(e) {
var $select = $("select#events");
$select.val($(this).data("value"));
// simulate click:
$select.find(":selected").click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="eventID" data-value="1" style="cursor:pointer;">
FirstEventName
</td>
</tr>
<tr>
<td class="eventID" data-value="11" style="cursor:pointer;">
EV_Hildegard Spinka
</td>
</tr>
<tr>
<td class="eventID" data-value="14" style="cursor:pointer;">
EV_Melody Parker
</td>
</tr>
<tr>
<td class="eventID" data-value="4" style="cursor:pointer;">
EV_Theodore Auer
</td>
</tr>
<tr>
<td class="eventID" data-value="17" style="cursor:pointer;">
EV_Aditya Stracke
</td>
</tr>
</tbody>
</table>
<select name="events[]" id="events" class="form-control" multiple="" required="">
<option value="1">FirstEventName</option>
<option value="14">EV_Melody Parker</option>
<option value="4">EV_Theodore Auer</option>
<option value="17">EV_Aditya Stracke</option>
<option value="11">EV_Hildegard Spinka</option>
</select>
You could separate the multiple values by comma , like data-value="books,html" then split when you're selecting them.
NOTE: To update the view after selecting the options programmatically you could use .change()
$(".eventID").on("click", function(e) {
$("#events").val($(this).data("value").split(',')).change();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="events" multiple>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
<button class="eventID" data-value="css">css</button>
<button class="eventID" data-value="php">php</button>
<button class="eventID" data-value="books,html">Books + html</button>
I SOLVED thanks to Zakaria Acharki's answer. However, I don't know if it's the best solution but it's working as I want.
I added a hidden input which will recieve all values I want to select.
After that I changed a little bit the JS code and add a new one.
// This code add values to the hidden input with "," and then, selecting every value on multiple select
$("td.eventID").on("click", function(e) {
var group = $('#groupingEvents');
var groupValues = group.val();
if(groupValues == "") {
group.val($(this).data("value") + ',');
} else
group.val(groupValues + $(this).data("value"));
$("#events").val(group.val().split(',')).change();
});
// This code is used if you click the selectbox to choose a new option, you need to send values to hidden input, otherwise, a bug appears.
$("#events").on("click", function() {
var group = $('#groupingEvents');
var selectValues = $(this).val();
if(group.val() == "") {
group.val(selectValues.join(","));
} else
group.val(selectValues.join(",") + ',')
});
$("td.eventID").on("click", function(e) {
var group = $('#groupingEvents');
var groupValues = group.val();
if(groupValues == "") {
group.val($(this).data("value") + ',');
} else
group.val(groupValues + $(this).data("value"));
$("#events").val(group.val().split(',')).change();
});
$("#events").on("click", function() {
var group = $('#groupingEvents');
var selectValues = $(this).val();
if(group.val() == "") {
group.val(selectValues.join(","));
} else
group.val(selectValues.join(",") + ',')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="eventID" data-value="1" style="cursor:pointer;">
FirstEventName
</td>
</tr>
<tr>
<td class="eventID" data-value="11" style="cursor:pointer;">
EV_Hildegard Spinka
</td>
</tr>
<tr>
<td class="eventID" data-value="14" style="cursor:pointer;">
EV_Melody Parker
</td>
</tr>
<tr>
<td class="eventID" data-value="4" style="cursor:pointer;">
EV_Theodore Auer
</td>
</tr>
<tr>
<td class="eventID" data-value="17" style="cursor:pointer;">
EV_Aditya Stracke
</td>
</tr>
</tbody>
</table>
<input type="hidden" id="groupingEvents" value="">
<select name="events[]" id="events" class="form-control" multiple="" required="">
<option value="1">FirstEventName</option>
<option value="14">EV_Melody Parker</option>
<option value="4">EV_Theodore Auer</option>
<option value="17">EV_Aditya Stracke</option>
<option value="11">EV_Hildegard Spinka</option>
</select>
Related
I have table with default amount and pre-number select option on top. When select a new price will change in each row's input. Here I want the new number from select calculate the total price into the next row automatically.
$('select.set_price').change(function() {
var pset = $(this).data('pset');
$('td.' + pset).find('input.price').val($(this).val());
});
//calc
$('.price').keyup(function() {
var i_pay = $(this).closest('tr').find('#pay').text();
var i_bet = $(this).val();
var total = (i_pay * i_bet);
$(this).closest('tr').find('#pay').html(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<tr>
<th class="align-middle text-center">#</th>
<th>
<select class="form-select set_price" data-pset="p_3hi">
<option value="" disabled selected>Order</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</th>
<th>total</th>
</tr>
<tr>
<td class="align-middle text-center">1</td>
<td class="w-10 p_3hi"><input type="number" class="form-control price" name="price1" value="1" /></td>
<td class="align-middle text-center">
<p id="pay">900</p>
</td>
</tr>
<tr>
<td class="align-middle text-center">2</td>
<td class="w-10 p_3hi"><input type="number" class="form-control price" name="price2" value="1" /></td>
<td class="align-middle text-center">
<p id="pay">800</p>
</td>
</tr>
</table>
What I expect is when I select 5. The #1 row's total would be 5*900=4500 and the #2 would be 5*800=4000. Please find the fiddle here : https://jsfiddle.net/w56940ez/
First change $('.price').keyup(function(){}); to $('.price').change(function(){}); or you won't be able to change total value using arrows. If you don't want to use arrows you can keep keyup event.
To automatically change the value of the total column you just need to use trigger("change") on your ìnput elements.
If you want the base values to always be 800 and 900, you should use a data-attributes (data-first-value) which will keep this value and which will be used during the calculation.
Identifiers must be unique like #j08691 said. So you have basically two solutions:
use a pay class instead of a pay id. You juste need to replace id="pay" with class="pay" and #pay with .pay
use two identifiers. You need to add another data-attributes (data-id) and use it to get the input you want.
$('select.set_price').change(function() {
var pset = $(this).data('pset');
input_elements = $('td.' + pset).find('input.price');
input_elements.val($(this).val());
input_elements.trigger("change");
});
//calc
$('.price').change(function() {
/*
USING A CLASS FOR BOTH
var i_pay = $(this).closest('tr').find('.pay').attr("data-first-val");
var i_bet = $(this).val();
var total = (i_pay * i_bet);
$(this).closest('tr').find('.pay').html(total);
*/
var i_pay = $("#"+$(this).attr("data-id")).attr("data-first-val");
var i_bet = $(this).val();
var total = (i_pay * i_bet);
$("#"+$(this).attr("data-id")).html(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<tr>
<th class="align-middle text-center">#</th>
<th>
<select class="form-select set_price" data-pset="p_3hi">
<option value="" disabled selected>Order</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</th>
<th>total</th>
</tr>
<tr>
<td class="align-middle text-center">1</td>
<td class="w-10 p_3hi">
<input type="number" class="form-control price" name="price1" value="1" data-id="pay_1" />
</td>
<td class="align-middle text-center">
<p id="pay_1" data-first-val="900">900</p>
<!--<p class="pay" data-first-val="900">900</p>-->
</td>
</tr>
<tr>
<td class="align-middle text-center">2</td>
<td class="w-10 p_3hi"><input type="number" class="form-control price" name="price2" value="1" data-id="pay_2"/></td>
<td class="align-middle text-center">
<p id="pay_2" data-first-val="800">800</p>
<!--<p class="pay" data-first-val="800">800</p>-->
</td>
</tr>
</table>
I have this working code which updates attributes based on the selection from a drop down box. I have it so the input fields and drop down save but currently the attributes do not. So when I refresh the page all of the data is still their but the input fields are no longer set to disabled. What would be the best way to go about that?
$(document).ready(function() {
$('.my_option').on('change', change_attribute);
});
function change_attribute() {
var version_val = $(this).val();
var parent_row = $(this).closest('tr');
if (version_val == 10) {
parent_row.find('.1').find('input').attr("disabled", "disabled");
parent_row.find('.2').find('input').removeAttr("disabled");
} else if (version_val == 20) {
parent_row.find('.2').find('input').attr("disabled", "disabled");
parent_row.find('.1').find('input').removeAttr("disabled");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<select class="my_option">
<option>10</option>
<option>20</option>
</select>
</td>
<td class="1"><input type="text"></td>
<td class="2"><input type="text"></td>
</tr>
<tr>
<td>
<select class="my_option">
<option>10</option>
<option>20</option>
</select>
</td>
<td class="1"><input type="text"></td>
<td class="2"><input type="text"></td>
</tr>
<tr>
<td>
<select class="my_option">
<option>10</option>
<option>20</option>
</select>
</td>
<td class="1"><input type="text"></td>
<td class="2"><input type="text"></td>
</tr>
</tbody>
</table>
I have many drop down boxes with different ids.
$("select").change(function(e) {
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<select id='priceType1' name='priceType1'>
<option value='SRP'>SRP</option>
<option value='DP'>DP</option></select>
</td>
</tr>
<tr>
<td>
<select id='priceType2' name='priceType2'>
<option value='SRP'>SRP</option>
<option value='DP'>DP</option></select>
</td>
</tr>
<tr>
<td>
<select id='priceType3' name='priceType3'>
<option value='SRP'>SRP</option>
<option value='DP'>DP</option></select>
</td>
</tr>
</table>
Now, whenever I select an option from adrop down, how will I get the selected value. I have tried the code below but it is not working. I need to do this in jquery since I want to have an ajax code aftergetting the selected value.
Here is the working code. Used on() with change. You can get selected value, as well as values of all 3 select drop-downs.:
$("select").on('change', function() {
console.log('Selected Value' + $(this).val());
$("select option:selected").each(function(k, v) {
console.log('Option ' + k + ' Value: ' + $(this).val());
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<select id='priceType1' name='priceType1'>
<option value='SRP'>SRP</option>
<option value='DP'>DP</option></select>
</td>
</tr>
<tr>
<td>
<select id='priceType2' name='priceType2'>
<option value='SRP'>SRP</option>
<option value='DP'>DP</option></select>
</td>
</tr>
<tr>
<td>
<select id='priceType3' name='priceType3'>
<option value='SRP'>SRP</option>
<option value='DP'>DP</option></select>
</td>
</tr>
</table>
Your code is correct but add select box change event written in document ready function ? that is the mistake.
JQuery
<script>
$(document).ready(function(){
$("select").change(function(e){
alert($(this).val());
});
});
</script>
I have created a table with multiple columns and written a jquery javascript that duplicates or clones the the last row of the table. However when it clones the last row it also gives each column the same name and id as the previous row.
jsp code:
<div id="invTruck" class="invTruck">
<table id="tbl_invTruck" width="100%" border="0">
<tbody>
<tr>
<td width="15%" style="display:none;"><center>Work Order Id</center></td>
<td width="17%"><center>Truck Type</center></td>
<td width="17%"><center>Licences Plate #</center></td>
<td width="17%"><center>Driver ID</center></td>
<td width="17%"><center>Max Haulage Weight</center></td>
<td width="17%"><center>Job Number</center></td>
</tr>
<tr>
<td style="display:none;"><input name="wInv_work_Id" type="text"></td>
<td><select id="invTru_Type" name="invTru_Type" onchange="getTruckPlates(this.value)">
<option disabled selected hidden value="">Select A Truck Type</option>
<%while(rsinvTru1.next()){%>
<option><%=rsinvTru1.getString(1)%></option>
<%}%>
</select>
</td>
<td><select id="invTru_LicensePlateNo" name="invTru_LicensePlateNo" required>
<option disabled selected hidden value="">Select A Truck</option>
</select></td>
<td><input name="driver_emp_Id" type="text"></td>
<td><input name="invTru_MaxHw" type="text"></td>
<td><input name="" type="text"></td>
</tr>
</tbody>
</table>
<table width="100%" height="50%" border="0">
<tr>
<td width="50%"><input class="buttonCreateInv" id="btn_AddTruck" type="button" value="Add A Truck"></td>
<td width="50%"><input class="buttonCreateInv" name="btn_RemoveTruck" type="button" value="Remove A Truck"></td>
</tr>
</table>
</div>
JQuery Javascript:
$(document).ready(function(){
$("#btn_AddTruck").click(function(){
var $tableBody = $('#tbl_invTruck').find("tbody"),
$trLast = $tableBody.find("tr:last"),
$trNew = $trLast.clone();
$trLast.after($trNew);
});
});
The expected output i would like is for the duplicated table row
where id in id1 is the orignal tables td id and 1 is appended to it.
and that if i was to add another row to the table
where id in id2 is the orignal tables td id and 2 is appended to it.
Try next one:
$(document).ready(function () {
$("#btn_AddTruck").click(function () {
var $tableBody = $('#tbl_invTruck').find("tbody"),
$trLast = $tableBody.find("tr:last"),
$trNew = $trLast.clone();
// Find by attribute 'id'
$trNew.find('[id]').each(function () {
var num = this.id.replace(/\D/g, '');
if (!num) {
num = 0;
}
// Remove numbers by first regexp
this.id = this.id.replace(/\d/g, '')
// increment number
+ (1 + parseInt(num, 10));
});
$trLast.after($trNew);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="invTruck" class="invTruck">
<table id="tbl_invTruck" width="100%" border="0">
<tbody>
<tr>
<td width="15%" style="display:none;"><center>Work Order Id</center></td>
<td width="17%"><center>Truck Type</center></td>
<td width="17%"><center>Licences Plate #</center></td>
<td width="17%"><center>Driver ID</center></td>
<td width="17%"><center>Max Haulage Weight</center></td>
<td width="17%"><center>Job Number</center></td>
</tr>
<tr>
<td style="display:none;"><input name="wInv_work_Id" type="text"></td>
<td><select id="invTru_Type" name="invTru_Type" onchange="getTruckPlates(this.value)">
<option disabled selected hidden value="">Select A Truck Type</option>
<!-- %while(rsinvTru1.next()){%>
<option><%=rsinvTru1.getString(1)%></option>
<%}% -->
</select>
</td>
<td><select id="invTru_LicensePlateNo" name="invTru_LicensePlateNo" required>
<option disabled selected hidden value="">Select A Truck</option>
</select></td>
<td><input name="driver_emp_Id" type="text"></td>
<td><input name="invTru_MaxHw" type="text"></td>
<td><input name="" type="text"></td>
</tr>
</tbody>
</table>
<table width="100%" height="50%" border="0">
<tr>
<td width="50%"><input class="buttonCreateInv" id="btn_AddTruck" type="button" value="Add A Truck"></td>
<td width="50%"><input class="buttonCreateInv" name="btn_RemoveTruck" type="button" value="Remove A Truck"></td>
</tr>
</table>
</div>
I want to make the disappear when Other Countries is selected.
This is my HTML
<select class="country" name="country">
<option value="Portugal">Portugal</option>
<option value="OtherCountries">Other Countries</option>
</select>
<tr id="this">
<td valign="middle"><label class="registration">VAT (23%)</label></td>
<td valign="middle"></td>
<td valign="middle"><input class="input_form_reg" name="vat_price" type="text"></td>
</tr>
And this is my script (which I found here on stackoverflow)
<script>
$("select").on('change', function() {
var sel = $("select").val();
if (sel=='Portugal') {
$("#this").css("display", "inline");
}else if (sel=='OtherCountries') {
$("#this").css("display", "none");
}
});
</script>
And I don't know why but it isn't working, it just stays there.
try
your html is invalid, wrap the tr inside table
<table>
<tr id="this">
<td valign="middle"><label class="registration">VAT (23%)</label></td>
<td valign="middle"></td>
<td valign="middle"><input class="input_form_reg" name="vat_price" type="text"></td>
</tr>
</table>
Working demo
JS
$("select").on('change', function () {
if (this.value == 'Portugal') {
$("#this").show();
} else {
$("#this").hide();
}
});
$("select").on('change', function () {
$("#this").toggle(this.value != "OtherCountries");
});
DEMO
Use this code
<select class="country" name="country">
<option value="Portugal">Portugal</option>
<option value="OtherCountries">Other Countries</option>
</select>
<table>
<tr id="this">
<td valign="middle"><label class="registration">VAT (23%)</label></td>
<td valign="middle"></td>
<td valign="middle"><input class="input_form_reg" name="vat_price" type="text"></td>
</tr>
</table>
<script>
$(".country").change(function() {
var sel = $(this).val();
if (sel=='Portugal') {
$("#this").show();
}
if (sel=='OtherCountries') {
$("#this").hide();
}
});
</script>
You can use show/hide instead of using css() method.
Try this:
$(".country").on('change', function() {
if($(this).val()=="OtherCountries"){
$("#this").hide();
}else{
$("#this").show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="country" name="country">
<option value="Portugal">Portugal</option>
<option value="OtherCountries">Other Countries</option>
</select>
<table id="this">
<tr>
<td valign="middle"><label class="registration">VAT (23%)</label></td>
<td valign="middle"></td>
<td valign="middle"><input class="input_form_reg" name="vat_price" type="text"></td>
</tr>
</table>
First change the ID to another one more explicit like "vat" or something, and try this:
$('.country').change(function(){
if($(this).val() == "OtherCountries"){
$("#vat").hide();
}else{
$("#vat").show();
}
});
Table tag was missing in your HTML due to which it was not identifying table row with ID. I have corrected the code. Please take a look at the code given below.
<select class="country" name="country">
<option value="Portugal">Portugal</option>
<option value="OtherCountries">Other Countries</option>
</select>
<table>
<tr id="this">
<td valign="middle"><label class="registration">VAT (23%)</label></td>
<td valign="middle"></td>
<td valign="middle"><input class="input_form_reg" name="vat_price" type="text"></td>
</tr>
</table>
<script>
$("select").on('change', function() {
var sel = $("select").val();
if (sel=='Portugal') {
$("#this").css("display", "block");
}else if (sel=='OtherCountries') {
$("#this").css("display", "none");
}
});
</script>