<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>
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 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>
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-->
I am look for a way to make it so that when the user selects an item form all the select (for which the value of the option is not nil) the div with id "js-market" is shown.
This is my html code:
<form class="js-chose">
<div class="col-md-6 col-xm-12">
<div class="form-group js-select">
<label>Select a Market</label>
<select class="form-control">
<option value='' disabled selected>Chose a Market</option>
<%Item.all.each do |item|%>
<option value="<%=item.id%>"><%=item.name.capitalize%></option>
<%end%>
</select>
</div>
</div>
<div class="col-md-6 col-xm-12">
<div class="form-group">
<label>Enter Market with:</label>
<select class="form-control js-select">
<option value='' disabled selected>Chose a Company</option>
<%Company.where(user_id: current_user.id).each do |company|%>
<option value="<%=company.id%>"><%=company.name%></option>
<%end%>
</select>
</div>
</div>
</form>
In short I need to make jQuery show the div with id="js-market" when both selects have been filled by the user and get the values of the selected items and assign them to a variable.
Thank you. Please let me know if I wasn't clear enough.
Example that works with multiple select elements
Link to jsfiddle
var counter = $('.select').length;
$('.select').change(function() {
$.each($('.select'),function(i,e) {
var t = $(this);
if (t.val() == undefined || t.val() == '') {
$('#js-market').fadeOut();
return;
}
if (i+1 == counter) {
$('#js-market').fadeIn();
}
});
});
#js-market {
display: none;
}
<select class="select">
<option value="">No Value</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value1">Value 4</option>
</select>
<select class="select">
<option value="">No Value</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value1">Value 4</option>
</select>
<select class="select">
<option value="">No Value</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value1">Value 4</option>
</select>
<div id="js-market">Lorem ipsum</div>
See this fiddle
You can do this by onchange() event in javascript. In the fiddle specified above, what I do is that, I've placed 2 select boxes and a div with id demo will be shown only if two of the select boxes are selected.
HTML
<select id="mySelect1" onchange="myFunction()">
<option value="0">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="mySelect2" onchange="myFunction()">
<option value="0">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div id="demo"></div>
JS
function myFunction() {
if (document.getElementById("mySelect1").value > 0 && document.getElementById("mySelect2").value > 0) {
document.getElementById("demo").style.display = "block";
} else document.getElementById("demo").style.display = "none";
}