Displaying items in the jquery append() upon a drop down selection

Displaying items in the jquery append() upon a drop down selection - javascript

I have a drop-down menu in the jquery append() function which adds contents to the row of a table whenever I click a button I call "AddItem".
$('#tbody').append(`<tr id="R${++rowIdx}">
<td class="row-index text-center">
<select style="resize:none" id="item-deducted">
<option id="window" value="Window">Window</option>
<option id="door" value="Door">Door</option>
</select>
</td>
<td>
<select style="resize:none; display:none;" id="shapeDeducted" selected="none" >
<option id="none" value="" selected></option>
<option id="Normal" value="Normal (LxH)">Normal (LxH)</option>
<option id="Triangular" value="Triangular">Triangular</option>
</select>
</td>
</tr>`);
I want to display option "Triangle" in the second select option whenever a user clicks or selects the option "Window" in the first select drop-down.

Use on change: $('#item-deducted').on('change').
$('#tbody').append(`<tr id="R$">
<td class="row-index text-center">
<select style="resize:none" id="item-deducted">
<option id="window" value="Window">Window</option>
<option id="door" value="Door">Door</option>
</select>
</td>
<td>
<select style="resize:none; display:none;" id="shapeDeducted" selected="none" >
<option id="none" value="" selected></option>
<option id="Normal" value="Normal (LxH)">Normal (LxH)</option>
<option id="Triangular" value="Triangular">Triangular</option>
</select>
</td>
</tr>`);
$('#item-deducted').on('change', function() {
if($(this).val() === 'Window'){
$('#shapeDeducted').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tbody"></div>

Related

I want the data of the same row whose check box is checked. My table row is in for loop

I want the data of the same row whose check box I will click. my table row is in for loop
and i want to display total price at end but it displaying all the boxes.
And i have take the value by name in my views but here my form component are in for loop so if data is not there it should not come.
here is my index.html:
{% for j in package %}
<tr class="valid-container">
<td style="cursor:pointer;">
<input type="checkbox" name="c1" > {{ j.visa_type }}
</td>
<td height="52">
<select class="custom-select processing_type" name="processing_type" data-id="{{ j.id }}" required>
<option value="{{ j.price }}" selected>Normal</option>
<option value="{{ j.express_price }}">Express</option>
</select>
</td>
<td height="52">
<select class="custom-select no_of_person" name="no_of_person" data-id="{{ j.id }}" required>
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control" name="travel_date" id="date" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td>{{ j.currency_type }} <output name="result" class="package_price">{{ j.price }}</output>.00</td>
</tr>
{% endfor %}
and this is my package.js:
$('.valid-container').ready(function() {
var date = $(this).find('#date').attr('required',true);
$('select').on('change', function() {
var id = $(this).data("id");
var total = $('select[name=processing_type]').val() * $('select[name=no_of_person]').val();
var price = $(this).find('.package_price').text();
});
});

You can use $(this).closest("tr") to get the closest tr and then simply use .find() to get the required values from selects and then use .text() to add total value to package_price .
Demo Code(with dummy values) :
//on change of select or checkbox
$('select ,input[type=checkbox] ').on('change', function() {
var selector = $(this).closest("tr")//get closest tr
//if checkbox is checked
if (selector.find("input[type=checkbox]").is(":checked")) {
//get select valus
var prcs_type = selector.find("select[name=processing_type]").val();
var no_person = selector.find("select[name=no_of_person]").val();
var total = prcs_type * no_person;
selector.find(".package_price").text(total)//add value to package_prcie.
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table>
<tr class="valid-container">
<td style="cursor:pointer;">
<input type="checkbox" name="c1" id="c1">1
</td>
<td height="52">
<select class="custom-select processing_type" name="processing_type" data-id="1" required>
<option value="19" selected>Normal</option>
<option value="20">Express</option>
</select>
</td>
<td height="52">
<select class="custom-select no_of_person" name="no_of_person" data-id="1" required>
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control" name="travel_date" id="date" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td>{{ j.currency_type }} <output name="result" class="package_price">{{ j.price }}</output>.00</td>
</tr>
<tr class="valid-container">
<td style="cursor:pointer;">
<input type="checkbox" name="c1" id="c1">2
</td>
<td height="52">
<select class="custom-select processing_type" name="processing_type" data-id="2" required>
<option value="19" selected>Normal</option>
<option value="20">Express</option>
</select>
</td>
<td height="52">
<select class="custom-select no_of_person" name="no_of_person" data-id="2" required>
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control" name="travel_date" id="date" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td>{{ j.currency_type }} <output name="result" class="package_price">{{ j.price }}</output>.00</td>
</tr>
</table>

JQuery / Javascript - Set multiple drop lists to match master drop list on link click

In the header of my web-page I have a drop list. The user can set a value here and then click "Set All".
<th>
<span ="MASTERAVAIL" >
<select id="CATAVAIL" class="myselect form-control" name="CATAVAIL" >
<option selected value="">Select a value</option>
<option value="Standard">Standard</option>
<option value="MTO">MTO</option>
<option value="Express">Express</option>
</select>
</span>
<a class="SetAvail" href="javascript:void(0);">Set All</a>
</th>
After clicking "Set All" all instances of the below should be set to match the above choice.
<td class="one td_left" nowrap="nowrap">
<span ="CATAVAIL" >
<select id="CATAVAIL" class="myselect form-control" name="CATAVAIL" >
<option selected value="">Select a value</option>
<option value="Standard">Standard</option>
<option value="MTO">MTO</option>
<option value="Express">Express</option>
</select>
</span>
</td>
How can I achieve this? I have a bit of code that works when I use input boxes... but not drop lists... here is that bit of code. It relates to other input boxes but it works on them. I just can't adapt it for drop lists.
<script type="text/javascript">
var $=jQuery;
$(document).ready(function() {
var myInput = $('#MASTERDATE4');
$('.SetDate4').click(function() {
$('input.CATDISCSTART').val(myInput.val());
});
});
</script>

You are using many class names wrong, interchanging them with id. What is this <span ="CATAVAIL" >? and multiple elements were also having same id which you should not do and set the value of the input on change of select not on document.ready().
$(document).ready(function() {
var myInput;
$('#CATAVAIL').change(function() {
myInput = $(this).val();
});
$('.SetAvail').click(function() {
console.log(myInput)
$('#CATAVAIL2').val(myInput);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<th>
<span>
<select id="CATAVAIL" class="myselect form-control" name="CATAVAIL" >
<option selected value="">Select a value</option>
<option value="Standard">Standard</option>
<option value="MTO">MTO</option>
<option value="Express">Express</option>
</select>
</span>
<a class="SetAvail" href="javascript:void(0);">Set All</a>
</th>
<td class="one td_left" nowrap="nowrap">
<span>
<select id="CATAVAIL2" class="myselect form-control" name="CATAVAIL" >
<option selected value="">Select a value</option>
<option value="Standard">Standard</option>
<option value="MTO">MTO</option>
<option value="Express">Express</option>
</select>
</span>
</td>

Show/hide select options based on value of another select using javascript/jquery?

I want to select and get results but options should be invisible so when I select name they show up like that
# SELECT FROM
<select>
<option value="n">name/option>
<option value="a">age</option>
<option value="c">country</option>
</select>
# GET
<select>
<!-- # IF YOU SELECT NAME THESE SHOW UP -->
<option value="1">john</option>
<option value="2">dan</option>
</select>
<select>
<!-- IF YOU SELECT AGE THESE SHOW UP -->
<option value="1">23</option>
<option value="2">24</option>
</select>
<select>
<!-- IF YOU SELECT COUNTRY THESE SHOW UP -->
<option value="1">uk</option>
<option value="2">usa</option>
</select>
but select tag should not be invisible. coz the HTML page cant be blank I want to make options only to be invisible

When main <select> is changed, get value of selected option and using it, select relevant select tag and show it.
$(".main").change(function(){
$("."+$(this).val()).show().siblings().not(".main").hide()
}).trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
# SELECT FROM
<select class="main">
<option value="n">name</option>
<option value="a">age</option>
<option value="c">country</option>
</select>
<br>
<select class="n">
# IF YOU SELECT NAME THESE SHOW UP
<option value="1">john</option>
<option value="2">dan</option>
</select>
<br>
<select class="a">
# IF YOU SELECT AGE THESE SHOW UP
<option value="1">23</option>
<option value="2">24</option>
</select>
<br>
<select class="c">
IF YOU SELECT COUNTRY THESE SHOW UP
<option value="1">uk</option>
<option value="2">usa</option>
</select>

HTML:
<form id="formname" name="formname" method="post" action="submitform.asp" >
<table width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="41%" align="right" valign="middle">Category1 :</td>
<td width="59%" align="left" valign="middle">
<select name="category1" id="category1">
<option value="">Select Category1</option>
<option value="n">name</option>
<option value="a">age</option>
<option value="c">country</option>
</select>
</td>
</tr>
<tr>
<td align="right" valign="middle">Category2 :</td>
<td align="left" valign="middle">
<select disabled="disabled" class="subcat" id="category2" name="category2">
<option value>Select Category2</option>
<!-- Home Ware -->
<optgroup data-rel="n">
<option value="1">john</option>
<option value="2">dan</option>
</optgroup>
<!-- Education -->
<optgroup data-rel="a">
<option value="1">23</option>
<option value="2">24</option>
</optgroup>
<!-- Books -->
<optgroup data-rel="c">
<option value="1">uk</option>
<option value="2">usa</option>
</optgroup>
</select>
</td>
</tr>
<tr>
</tr>
</table>
</form>
JS:
$(function(){
var $cat = $("#category1"),
$subcat = $(".subcat");
var optgroups = {};
$subcat.each(function(i,v){
var $e = $(v);
var _id = $e.attr("id");
optgroups[_id] = {};
$e.find("optgroup").each(function(){
var _r = $(this).data("rel");
$(this).find("option").addClass("is-dyn");
optgroups[_id][_r] = $(this).html();
});
});
$subcat.find("optgroup").remove();
var _lastRel;
$cat.on("change",function(){
var _rel = $(this).val();
if(_lastRel === _rel) return true;
_lastRel = _rel;
$subcat.find("option").attr("style","");
$subcat.val("");
$subcat.find(".is-dyn").remove();
if(!_rel) return $subcat.prop("disabled",true);
$subcat.each(function(){
var $el = $(this);
var _id = $el.attr("id");
$el.append(optgroups[_id][_rel]);
});
$subcat.prop("disabled",false);
});
});
DEMO:
Fiddler

Just give your select tags the appropriate ids and hide/show them in the change event of the first select.
You can hide the selects in your html by using the hidden attribute.
$('#dropdown').on('change',function(){
$('select:not(#dropdown)').hide(); //hides all selects except the one with id "dropdown"
$("#" + $(this).val()).show(); //shows the select where id = #dropdown's value ("n"/"a"/"c")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown">
<option value="n">name</option>
<option value="a">age</option>
<option value="c">country</option>
</select>
<select id="n">
<option value="1">john</option>
<option value="2">dan</option>
</select>
<select id="a" hidden>
<option value="1">23</option>
<option value="2">24</option>
</select>
<select id="c" hidden>
<option value="1">uk</option>
<option value="2">usa</option>
</select>

Select options from only one item, jquery change each

So I'm trying to build a quickbuy of products with different variants in my list of products. The product has a set of avaialble options, that are collected from the select option with jQuery, passed to a input field and then submitted to the cart. The products are listed out by a loop. When I'm at the single product page it works fine, since all the option values are required.
But once in the list of products, it gets the options from all the products and passes them to all the submit fields. How can I scope a jquery function to work on only one product at a time
In the example below, I want the field to have only the values from the select options relevant to the product. Not th evalues from both product options.
$(document).ready(function() {
$(".variant-selected")
.change(function() {
var str = "";
$("select option:selected").each(function() {
str += $(this).val() + ".";
});
$("input[name='variant']").val(str.slice(0, -1));
})
.trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod1">
<h2>
Shirt
</h2>
<select class="variant-selected" name="select1">
<option value="1" selected>Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<select class="variant-selected" name="select2">
<option value="A" selected>Large</option>
<option value="B">Medium</option>
<option value="C">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
<div id="prod2">
<h2>Jeans
</h2>
<select class="variant-selected" name="select1">
<option value="4" selected>Orange</option>
<option value="5">Teal</option>
<option value="6">Forest</option>
</select>
<select class="variant-selected" name="select2">
<option value="D" selected>Large</option>
<option value="E">Medium</option>
<option value="F">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>

here you have
$(document).ready(function() {
$(".variant-selected")
.change(function() {
var str = "";
$(this).parent().find("select option:selected").each(function() {
str += $(this).val() + ".";
});
$(this).parent().find("input[name='variant']").val(str.slice(0, -1));
})
.trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod1">
<h2>
Shirt
</h2>
<select class="variant-selected" name="select1">
<option value="1" selected>Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<select class="variant-selected" name="select2">
<option value="A" selected>Large</option>
<option value="B">Medium</option>
<option value="C">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
<div id="prod2">
<h2>Jeans
</h2>
<select class="variant-selected" name="select1">
<option value="4" selected>Orange</option>
<option value="5">Teal</option>
<option value="6">Forest</option>
</select>
<select class="variant-selected" name="select2">
<option value="D" selected>Large</option>
<option value="E">Medium</option>
<option value="F">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>

dropdown value is not inserting as actual

If I select Yes, insert into query is taking as 11 in database:
<td align="center">Offers in Hand :</td>
<td>
<select name="Offers_in_Hand" id="Offers_in_Hand_Id" style="width: 250px" Required>
<option selected></option>
<option value="11">Yes</option>
<option value="22">No</option>
</select>
</td>

Change options value to desired, in your case "Yes" & "No", like this:
(jQuery added only to confirm correct value is being captured)
$("#Offers_in_Hand_Id").change(function() {
var value = $("#Offers_in_Hand_Id").val();
$("#test").html(value);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td align="center">Offers in Hand :</td>
<td>
<select name="Offers_in_Hand" id="Offers_in_Hand_Id" style="width: 250px" Required>
<option selected></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<span id="test"></span>

We Keep Coding

JavaScript is the programming language of the Web.

Displaying items in the jquery append() upon a drop down selection - javascript

Related

I want the data of the same row whose check box is checked. My table row is in for loop

JQuery / Javascript - Set multiple drop lists to match master drop list on link click

Show/hide select options based on value of another select using javascript/jquery?

Select options from only one item, jquery change each

dropdown value is not inserting as actual

Categories

Resources