how many parameters are there in jquery for below example how do I have to use this
I have two select box and both of them are same if I change value of my select 1 another select has been chancing too and this is something that should not be that's why I want to prevent this how can I do that ?
$(document).ready(function() {
$(".person-1, .person-2").change(function() {
var val1 = parseInt($('.person-1').find(":selected").text()),
val2 = parseInt($('.person-2').find(":selected").text());
$(".addition-1").text(val1);
$(".addition-2").text(val2);
$(".addition").text(val1 + val2);
});
});
select {
width: 150px;
height: 40px;
}
.personBox {
background: #FFF;
width: 350px;
border: 1px solid #ccc;
padding: 10px;
float: left;
margin-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="personBox">
<h2>SELECT 1</h2>
<select class="person-1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="person-2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p>Add 1: <span class="addition-1"></span></p>
<p>Add 2: <span class="addition-2"></span></p>
<p>Addition : <span class="addition"></span> </p>
</div>
<!-- personBox-->
<div class="personBox">
<h2>SELECT 2</h2>
<select class="person-1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="person-2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p>Add 1: <span class="addition-1"></span></p>
<p>Add 2: <span class="addition-2"></span></p>
<p>Addition : <span class="addition"></span> </p>
</div>
<!-- personBox-->
you must provide a context which to find the elements not find elements in the document.
$(document).ready(function() {
$(".person-1, .person-2").change(function() {
var context=$(this).closest('div');
var val1 = parseInt($('.person-1',context).find(":selected").text()),
val2 = parseInt($('.person-2',context).find(":selected").text());
$(".addition-1",context).text(val1);
$(".addition-2",context).text(val2);
$(".addition",context).text(val1 + val2);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="personBox">
<h2>SELECT 1</h2>
<select class="person-1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="person-2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p>Add 1: <span class="addition-1"></span></p>
<p>Add 2: <span class="addition-2"></span></p>
<p>Addition : <span class="addition"></span> </p>
</div>
<!-- personBox-->
<div class="personBox">
<h2>SELECT 2</h2>
<select class="person-1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="person-2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p>Add 1: <span class="addition-1"></span></p>
<p>Add 2: <span class="addition-2"></span></p>
<p>Addition : <span class="addition"></span> </p>
</div>
<!-- personBox-->
Related
I need to change the first option in the select options and put the first paragraph text inside it, so the first paragraph will be the first option text in the first select element, and the second paragraph to be the first option in the next select element. I know my approach is not at all correct but I tried and couldn't find the right way to do it. Do I need to loop? Or is there another way of doing that? I'm trying using jQuery.
$('.select-container p').each(function(index) {
let textPar = $(this).text();
$('.select-container select option:first-child').each(function(index) {
$(this).text(textPar);
});
});
select {
width: 200px;
padding: 5px 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="select-container">
<p>First paragraph</p>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="select-container">
<p>Second paragraph</p>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
You just need to think through your selectors a bit better. You were updating the text of all select elements, so you need to be more specific. Then, you don't need to loop over one element after selecting it.
$('.select-container p').each(function() {
const par = $(this);
const parText = par.text();
par.next('select').find('option:first-child').text(parText);
});
select {
width: 200px;
padding: 5px 8px;
}
<div class="container">
<div class="select-container">
<p>First paragraph</p>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="select-container">
<p>Second paragraph</p>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I am new to jQuery/JS and I have this problem: You can run my code and see that count is not correct:
$('.form-control').change(function() {
countTotal();
});
$('.form-control').change(function() {
countTotal();
});
function countTotal() {
var level1 = parseInt($(".form-control :selected").val(), 10);
var level2 = parseInt($(".form-control :selected").val(), 10);
var total = level1 * level1;
$(".form-group > #riz").val(total);
$(".form-group > #riz").attr("disabled", true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<input id="riz">
</div>
<hr>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<input id="riz">
</div>
My HTML has to stay the same, I have to find some way to jQuery work in this example and keep the HTML structure the same. If you have any idea how to solve this, feel free to comment or share code ideas.
I appreciate your help!
There is multiple problems with your code.
First, you are using the same id multiple times. ID must be unique.
Second, think this is wrong var total = level1 * level1; should be var total = level1 * level2;
Third, you don't need to use :selected in $(".form-control :selected").val(), since $(".form-control").val() will always take the value of the selected option, if your element is a select.
Now I have changed both your html and jquery so it will work to your requirement.
Demo
$('.form-control').change(function() {
countTotal($(this));
});
function countTotal(ele) {
var level1 = parseInt(ele.val() || 0, 10);
var level2 = parseInt(ele.siblings(".form-control").val() || 0, 10);
var total = level1 * level2;
ele.closest(".form-group").next().find(".riz").val(total);
ele.closest(".form-group").next().find(".riz").attr("disabled", true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<input class="riz">
</div>
<hr>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<input class="riz">
</div>
I'm trying to update the value of selectbox option after click. It should subtract the selected value to itself.
<div class="pull-left col-xs-12 col-sm-4 col-md-4">
<label for="rooms" style="color:black">No. of rooms: </label>
<select required tabindex="10" id="selectBoxStandard" name="n_rooms">
<option value="0">0</option>
<option value="1">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>
</select>
</div>
<div class="button-style-1" style="padding-bottom:80px" style="padding-bottom:40px"><a href="javascript:standardRoom()" ><i class="fa fa-calendar"></i><span class="mobile-visibility">BOOK
</span></a></div>
standardRoom function
function standardRoom()
{
$('#selectBoxStandard option').val(Number($("#selectBoxStandard").val()) - Number($("#selectBoxStandard option").val()));
}
If the selected value is 3 after click the remaining value should update to:
<div class="pull-left col-xs-12 col-sm-4 col-md-4">
<label for="rooms" style="color:black">No. of rooms: </label>
<select required tabindex="10" id="selectBoxStandard" name="n_rooms">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
To remove last childs from #selectBoxStandard based on option value:
$('button').on('click', standardRoom);
function standardRoom() {
$('#selectBoxStandard').find("option:nth-last-child(-n+" + $('#selectBoxStandard').val() + ")").remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pull-left col-xs-12 col-sm-4 col-md-4">
<label for="rooms" style="color:black">No. of rooms: </label>
<select required tabindex="10" id="selectBoxStandard" name="n_rooms">
<option value="0">0</option>
<option value="1">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>
</select>
<button>Update</button>
</div>
This will work but could probably be done a bit easier or better:
function standardRoom(){
var last_option = $('#selectBoxStandard option:last-child').val();
var selected_option = $('#selectBoxStandard').val();
$("#selectBoxStandard option").each(function() {
if($(this).val() > (last_option - selected_option)){
$(this).remove();
}
});
}
add this js
let total = 7
function changed(){
let selBox = document.getElementById('selectBoxStandard');
let value = selBox.value;
//remove all options
while(selBox.children.length > 0) selBox.removeChild(selBox.children[0]);
//add new options according to value;
for(let i = 0;i<7-value+1;i++){
selBox.innerHTML += `<option value="${i}">${i}</option>`
}
//resets value
selBox.value = value;
}
add onchange on ur select
<select onchange="changed()" required tabindex="10" id="selectBoxStandard" name="n_rooms">
if you want to change on btn click use this
<div onclick="changed()" class="button-style-1" style="padding-bottom:80px" style="padding-bottom:40px"><a href="javascript:standardRoom()" ><i class="fa fa-calendar"></i><span class="mobile-visibility">BOOK
</span></a></div>
I have to do a event when checkbox is unchecked then select dropdown value is set to be null or default.
Html code:
<div class="checkbox">
<label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_8am_10am" id="tomorrow_8am_10am" value="8am-10am">8am - 10am</label>
<i class="tomorrow_8am_10am box">
<select name="pref_tomorrow_8am_10am">
<option value="-1">No Preferences</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</i>
</div>
<div class="checkbox">
<label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_10am_12pm" id="tomorrow_10am_12pm" value="10am-12pm">10am - 12pm</label>
<i class="tomorrow_10am_12pm box">
<select name="pref_tomorrow_10am_12pm">
<option value="-1">No Preferences</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</i>
</div>
<div class="checkbox ">
<label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_12pm_2pm" id="tomorrow_12pm_2pm" value="12pm-2pm">12pm - 2pm</label>
<i class="tomorrow_12pm_2pm box">
<select name="pref_tomorrow_12pm_2pm">
<option value="-1">No Preferences</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</i>
</div>
In above code i am append/show dropdown on click of checkbox.
Now i have to do this when i uncheck the checkbox at that time set the value of dropdown to be null/default.
Javascript code:
$('input[type="checkbox"]').click(function(){
var inputValue = $(this).attr("id");
$("." + inputValue).toggle();
});
This is my JS code, from this i am appending the select div beside my checkbox.
Can anyone help me for that?
Try this! :D
$(document).ready(function() {
$('select').on('click change',function() {
$(this).closest('div.checkbox').find('input:checkbox').prop('checked',$(this).val()>0);
});
$('input:checkbox').on('click change',function() {
if (!$(this).is(':checked')) $(this).closest('div.checkbox').find('select').val('-1');
});
});
See working demo on codeply:
http://www.codeply.com/go/7t3ZvFz5yF
Do something when checkbox is unchecked
Inside of your function, you can check whether the checkbox is checked/unchecked with:
if (this.checked)
or
if (!this.checked)
and put whatever code you want to execute based on this condition in the if block.
Select an option from dropdown with jQuery
You can use the value attribute of the option you want to select:
$('#yourDropdown select').val('valueOfOptionToBeSelected`);
Example:
$('input[type="checkbox"]').click(function(){
var inputValue = $(this).attr("id");
$("." + inputValue).toggle();
if (!this.checked) {
$("." + inputValue + ' select').val('-1');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
<label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_8am_10am" id="tomorrow_8am_10am" value="8am-10am">8am - 10am</label>
<i class="tomorrow_8am_10am box" style="display:none">
<select name="pref_tomorrow_8am_10am">
<option value="-1">No Preferences</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</i>
</div>
<div class="checkbox">
<label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_10am_12pm" id="tomorrow_10am_12pm" value="10am-12pm">10am - 12pm</label>
<i class="tomorrow_10am_12pm box" style="display:none">
<select name="pref_tomorrow_10am_12pm">
<option value="-1">No Preferences</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</i>
</div>
<div class="checkbox ">
<label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_12pm_2pm" id="tomorrow_12pm_2pm" value="12pm-2pm">12pm - 2pm</label>
<i class="tomorrow_12pm_2pm box" style="display:none">
<select name="pref_tomorrow_12pm_2pm">
<option value="-1">No Preferences</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</i>
</div>
Also, I'm not sure what your intention is, but you might want to add display: none to hide the drop down on page load, and then toggle the visibility when the user interacts with the checkbox.
I'm pretty sure I get what you want. When you check a box, it selects 1 (or whatever you would prefer). When you uncheck, it sets it back to no preference.
$('input[type="checkbox"]').click(function(){
var inputValue = $(this).attr("id");
if ($(this).is(":checked")) {
$("." + inputValue + " select").val(1);
} else {
$("." + inputValue + " select").val(-1);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
<label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_8am_10am" id="tomorrow_8am_10am" value="8am-10am">8am - 10am</label>
<i class="tomorrow_8am_10am box">
<select name="pref_tomorrow_8am_10am">
<option value="-1">No Preferences</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</i>
</div>
<div class="checkbox">
<label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_10am_12pm" id="tomorrow_10am_12pm" value="10am-12pm">10am - 12pm</label>
<i class="tomorrow_10am_12pm box">
<select name="pref_tomorrow_10am_12pm">
<option value="-1">No Preferences</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</i>
</div>
<div class="checkbox ">
<label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_12pm_2pm" id="tomorrow_12pm_2pm" value="12pm-2pm">12pm - 2pm</label>
<i class="tomorrow_12pm_2pm box">
<select name="pref_tomorrow_12pm_2pm">
<option value="-1">No Preferences</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</i>
</div>
if ($('.tomorrow-schedule-time').is(':checked')){
//
} else {
$('select').append('<option>Default</option>');
}
$('input[type="checkbox"]').on('change', function(){
var $select = $(this).parents('.checkbox').find('select');
console.log($select.length);
$select.val("1");
if (!$(this).is(':checked')) {
console.log('uncheck');
$select.val("-1");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
<label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_8am_10am" id="tomorrow_8am_10am" value="8am-10am">8am - 10am</label>
<i class="tomorrow_8am_10am box">
<select name="pref_tomorrow_8am_10am">
<option value="-1">No Preferences</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</i>
</div>
<div class="checkbox">
<label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_10am_12pm" id="tomorrow_10am_12pm" value="10am-12pm">10am - 12pm</label>
<i class="tomorrow_10am_12pm box">
<select name="pref_tomorrow_10am_12pm">
<option value="-1">No Preferences</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</i>
</div>
<div class="checkbox ">
<label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_12pm_2pm" id="tomorrow_12pm_2pm" value="12pm-2pm">12pm - 2pm</label>
<i class="tomorrow_12pm_2pm box">
<select name="pref_tomorrow_12pm_2pm">
<option value="-1">No Preferences</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</i>
</div>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes('dLang')">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div class="checkboxes" id="dLang" style="overflow-x: hidden;">
<label for="three"><input type="checkbox" id="three"/>Czech</label>
<label for="three"><input type="checkbox" id="three"/>Danish</label>
<label for="three"><input type="checkbox" id="three"/>Dutch</label>
</div>
</div>
#This code working fine but i want to add scrollbar here.Can any one help?#
Take a look at this snippet. Is this what you need?
.multiSelect {
height: 100px;
overflow: scroll;
overflow-x: hidden;
}
<select class="multiSelect" multiple>
<option value="1">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>
</select>
(Hold down CTRL to select multiple elements)
This is you should need to check : http://www.jqueryfaqs.com/Articles/Multiple-Select-MultiSelect-DropDownList-with-CheckBoxes-using-jQuery.aspx
<script type="text/javascript">
$(function () {
$('[id*=your id name ]').multiselect({
includeSelectAllOption: true
});
});
</script>