jQuery multiple click instances - javascript

I've made a custom select box that opens when a button is clicked which works fine. However, with multiple select boxes on the same page when one button is clicked all of the select boxes are opened up. Is there a way to do this without applying separate classes to each select box and multiple functions for each select box ?
Here's my HTML.
<div class="select-box-wrap">
<select class="select-box" name="mbpanel_layout_section_options[site_layout]">
<option value="1" <?php if(1 == $options['site_layout']) echo 'selected'; ?>>Left Sidebar</option>
<option value="2" <?php if(2 == $options['site_layout']) echo 'selected'; ?>>Right Sidebar</option>
<option value="3" <?php if(3 == $options['site_layout']) echo 'selected'; ?>>Three Column</option>
<option value="4" <?php if(4 == $options['site_layout']) echo 'selected'; ?>>Full Width</option>
</select>
<input type="button" class="select-click"/>
</div>
<div class="select-box-wrap">
<select class="select-box" name="mbpanel_layout_section_options[post_layout]">
<option value="1" <?php if(1 == $options['post_layout']) echo 'selected'; ?>>Left Thumbnail</option>
<option value="2" <?php if(2 == $options['post_layout']) echo 'selected'; ?>>Right Thumbnail</option>
<option value="3" <?php if(3 == $options['post_layout']) echo 'selected'; ?>>Top Thumbnail</option>
</select>
<input type="button" class="select-click"/>
</div>
and here's the jQuery.
(function($){
$(".select-click").click(function () {
var size = $('.select-box option').size();
if (size != $(".select-box").prop('size')) {
$(".select-box").prop('size', size);
$(".select-box").addClass("select-open");
} else {
$(".select-box").prop('size', 1);
$(".select-box").removeClass("select-open");
}
})
})( jQuery );
and here's a JSFiddle

You need to use DOM traversal to find the .select-box related to the clicked button instead of using the class selector which affects all instances of the element. Try this:
(function($) {
$(".select-click").click(function() {
var $selectBox = $(this).prev('.select-box');
var size = $selectBox.find('option').size();
var sizeDifference = size != $selectBox.prop('size');
$selectBox.prop('size', sizeDifference ? size : 1).toggleClass("select-open", sizeDifference);
})
})(jQuery);
Working example
Note that I also changed the logic slightly with the use of a ternary expression to make the code shorter.

Related

How to change a second select list based on the first select list option when values are dynamic?

I have php page for vehicle search filter which have 2 types of vehicle that is RV's and campervans and also have two selects
<div class="fields">
<p>Vehicle Type</p>
<select class="car" name="car_type" id="car_type">
<option value="0">Select Vehicle</option>
<?php if(count($vehicleType) > 0 ){
foreach($vehicleType as $vt){ ?>
<option value="<?php echo $vt ?>" <?=isset($_GET['car_type'])&&$_GET['car_type']==$vt?'selected':'';?> ><?php echo $vt ?></option>
<?php }
} ?>
</select>
</div>
<div class="fields">
<p>Total No. of Passengers*</p>
<select class="half" name="passengers" id="passengers">
<option>No. of Passengers</option>
<option <?php if(#$_REQUEST['passengers'] == 1){?>selected<?php }?>>1</option>
<option <?php if(#$_REQUEST['passengers'] == 2){?>selected<?php }?>>2</option>
<option <?php if(#$_REQUEST['passengers'] == 3){?>selected<?php } ?>>3</option>
<option <?php if(#$_REQUEST['passengers'] == 4){?>selected<?php }?>>4</option>
<option <?php if(#$_REQUEST['passengers'] == 5){?>selected<?php }?>>5</option>
<option <?php if(#$_REQUEST['passengers'] == 6){?>selected<?php }?>>6</option>
<option <?php if(#$_REQUEST['passengers'] == 7){?>selected<?php }?>>7</option>
<option <?php if(#$_REQUEST['passengers'] == 8){?>selected<?php }?>>8</option>
</select>
</div>
How do I do that with jQuery or php if I choose "Rv" in the first select? The second select would show me 8 passengers . If I choose Campervan in the first select, the second select would show me 5 passengers..
I would probably do something along these lines:
<?php
$number_of_passengers = 8;
if(!empty($_REQUEST['car_type'])) {
$number_of_passengers = $_REQUEST['car_type'] == 'Campervans' ? 5 : 8;
}
$passengers = 0;
if(!empty($_REQUEST['passengers'])){
$passengers = (int) $_REQUEST['passengers'];
}
?>
<select class="car" name="car_type" id="car_type">
<option value="0">Select Vehicle</option>
<option value="RV/Motorhome">RV/Motorhome</option>
<option value="Campervans">Campervans</option>
</select>
<select class="half" name="passengers" id="passengers">
<option>No. of Passengers</option>
<?php
for($i = 1; $i <= $number_of_passengers; $i++) {
?>
<option
<?php
if($i == $passengers) {
echo ' selected ';
}
?>
>
<?php echo $i ?>
</option>
<?php
}
?>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('#car_type').change(function() {
$("#passengers").children().removeAttr("selected");
if ($(this).val() === 'Campervans') {
$('#passengers option:nth-child(n+7)').hide();
} else {
$('#passengers option').show();
}
});
</script>
There are cleaner ways of doing this but this should serve to get the point across.
Few things to note about the PHP:
See how I check if the $_REQUEST key is available using empty - this avoids having to use # which is generally not a good idea.
I am using a loop to echo the options in the passenger select to avoid code repetition because typing that out 8 times is boring ;-)
Hope this helps!
yes you need to add javascript code for that.
insert below code in your page and check if this is what you want?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$('.car').on('change', function(){
if($(this).val() === 'RV/Motorhome'){
$('.half').find('option').show()
}else if($(this).val() === 'Campervans'){
$('.half').find('option').slice(6).hide();
}
})
</script>

jQuery Multiselect length return default value when I use history.go(-1);

I have a multi-select dropdown and external div that post the number of selections. When I save the document as XML a window opens with an option to go back (I am using onclick="history.go(-1);").
Everything works except that the number of selection is = 0 even if the input has some elements selected.
Thanks.
java script code
$("#airlaine").change(function () {
var count = $(".k-multiselect-wrap li").length;
//console.log(count);
$('#displaycount').text(count);
});
html code
<div class="col-md-4 block">
<div class="iconqsai navy">
<p class="icontitle">QSAI</p>
<h4 id="displaycount" class="displaycount" name="aircount" value=""><?php if ($airlainecount != ""){echo $airlainecount;} else {echo "0";} ?></h4>
</div>
<div class="grayArea airline">
<div class="PanelMultiSelect"></div>
<select id="airlaine" name="airlines[]" multiple="multiple" class="numairline">
<option value="AA" <?php if (in_array("AA", $airline)) {echo "selected";}?> >AC</option>
<option value="AB" <?php if (in_array("AB", $airline)) {echo "selected";}?> >AF</option>
<option value="AC" <?php if (in_array("AC", $airline)) {echo "selected";}?> >ANA</option>
<option value="AD" <?php if (in_array("AD", $airline)) {echo "selected";}?> >EIL</option>
</select>
</div>
</div>
do you want to count list of .k-multiselect-wrap li or #airlaine selection?
for #airlaine selection:
$("#airlaine").change(function () {
var count = $("#airlaine option:selected").length;
$('#displaycount').text(count);
});

Manipulating dropdowns populated by AJAX

JQuery is my best friend in good and bad Javascript times. However, some times it takes some figuring out for me before I finally achieve my goal. This is one of these days. This they I bumped into a certain issue I can't really find my way around. I'll try explaining it below.
My HTML
<select name="one" id="one">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
....
</select>
<select name="two" id="two">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
....
</select>
<select name="three" id="three">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
....
</select>
My JQuery
$(document).ready(function() {
if (one != 0) {
// Set select dropdown one
}
if (two != 0) {
// Set select dropdown two
}
if (three != 0) {
// Set select dropdown three
}
});
$(document).on('change', '#three', function() {
var item = $(this).val();
var url = basePath + 'item/' + item;
window.location = url;
});
PHP
<script type="text/javascript">
var one = <?= $one; ?>;
var two = <?= $two; ?>;
var two = <?= $three; ?>;
</script>
The issue
What I want to achieve is that when an option is selected in dropdown one, JQuery loads dropdown two. When an option is selected in dropdown two, JQuery loads dropdown three.
I've got this working. However, when dropdown three is selected, it does a refresh. But as soon as that refresh is done, all select values would be set again and another refresh would be triggered.
I want JQuery to only refresh the first time, set all select values after the refresh (thus triggering the change event on the select dropdowns and loading the values) but not refreshing when the third select dropdown value is set.
If I need to do more explaining on this please let me know. Any suggestions and help would be very welcome.
Progress
if (false !== rootpfgroup && false !== hoofdpfgroup && false !== subpfgroup) {
$('#one').val(rootpfgroup).trigger('change');
$('#two').val(hoofdpfgroup).trigger('change');
$('#three').val(subpfgroup);
}
I've found the following to be working. However, it only sets the first dropdown. Selecting a value in the first dropdown triggers an ajax call that loads the options for the second one. Selecting an option in the second drop down triggers an ajax call that loads the options for the third one. Can somebody tell me more on how to go about this and what I'm doing wrong? Thanks in advance.
As per my comment above, setting the selected dropdown value using PHP to set the HTML selected attribute would also work, eliminating your refresh problem and meaning that the value persistence works without JS (whether you care about that is a different matter):
<?php
$one = '';
$two = '';
$three = '';
if (!empty($_POST['one'])) {
$one = $_POST['one'];
}
if (!empty($_POST['two'])) {
$two = $_POST['two'];
}
if (!empty($_POST['three'])) {
$three = $_POST['three'];
}
?>
$(document).on('change', '#three', function() {
var form = $('#form');
var item = $(this).val();
var url = basePath + 'item/' + item;
form.attr('action', url);
form.submit();
});
<form action="" method="POST" id="form">
<select name="one" id="one">
<option value="1" <?php if ($one == 1):?>selected<?php endif;?>>One</option>
<option value="2" <?php if ($one == 2):?>selected<?php endif;?>>Two</option>
<option value="3" <?php if ($one == 3):?>selected<?php endif;?>>Three</option>
</select>
<select name="two" id="two">
<option value="1" <?php if ($two == 1):?>selected<?php endif;?>>One</option>
<option value="2" <?php if ($two == 2):?>selected<?php endif;?>>Two</option>
<option value="3" <?php if ($two == 3):?>selected<?php endif;?>>Three</option>
</select>
<select name="three" id="three">
<option value="1" <?php if ($three == 1):?>selected<?php endif;?>>One</option>
<option value="2" <?php if ($three == 2):?>selected<?php endif;?>>Two</option>
<option value="3" <?php if ($three == 3):?>selected<?php endif;?>>Three</option>
</select>
</form>
As I mentioned, depending on what your data actually looks like (assuming it isn't just lists of numbers ;) you might be able to add some loops in your PHP to avoid repetition.
<?php
$one = '';
$two = '';
$three = '';
if (!empty($_POST['one'])) {
$one = $_POST['one'];
}
if (!empty($_POST['two'])) {
$two = $_POST['two'];
}
if (!empty($_POST['three'])) {
$three = $_POST['three'];
}
?>
$(document).ready(function() {
var one = '<?= $one; ?>';
var two = '<?= $two; ?>';
var three = '<?= $three; ?>';
if (one != '') {
$('#one').val(one);
}
if (two != '') {
$('#two').val(two);
}
if (three != '') {
$('#three').val(three);
}
});
$(document).on('change', '#three', function() {
var form = $('#form');
var item = $(this).val();
var url = basePath + 'item/' + item;
form.attr('action', url);
form.submit();
});
<form action="" method="POST" id="form">
<select name="one" id="one">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select name="two" id="two">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select name="three" id="three">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</form>
This should now set the values as intended.

Javascript function to check a box based on value of select option

I currently have a javascript function, which changes a select option to 1 if a checkbox is checked. What I can't seem to figure out, is how to automatically check the box if the user fails to tick the checkbox and just chooses a value (other than 0) from the select dropdown. The script has ID's and names that are generated with php array values.
Thank you for taking the time to look at this.
function quantityChangeHandler(source) {
var qtyElem = document.getElementById(source.getAttribute('rel'));
if (source.checked) {
if (qtyElem.value == 0)
qtyElem.value = 1;
}
else
qtyElem.value = 0;
}
<input type="checkbox" onclick="quantityChangeHandler(this)"
name="prodid[<?php echo $prodid;?>][]" rel="prodqty_<?php echo $prodid . '_' . $contactid; ?>"
value="<?php echo $contactid; ?>" /><br />
Qty
<select id="prodqty_<?php echo $prodid . '_' . $contactid; ?>"
name="prodqty[<?php echo $prodid; ?>][<?php echo $contactid; ?>]">
<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>
You should add a similar handler and rel attribute to the select tag, and set source.checked based on the value of the select element.
Add this to your Javascript:
function selectChangeHandler(source) {
var checkboxElem = document.getElementById(source.getAttribute('rel'));
checkboxElem.checked = source.value != 0;
}
Example changes to HTML:
<input id="checkbox_0" ... />
...
<select ... rel="checkbox_0" onchange="selectChangeHandler(this)">
...
Working JSFiddle
From my understanding manually trigger the checkbox selection is by triggering the click event.
say you checkbox id = "mychkbox"
then using the jquery you can do by $('#mychkbox').trigger('click');
this makes the check box selected selected.
and your check condition for if checkbox is selected or not.

Combo box's default combination

I have two combo boxes, one for 'order by' and the other 'direction' (ascending, descending)
I am wondering what is the simplest way to have a default combination... e.g order by A-Z I would want ascending by default and order by views I would want descending by default.
I guess, onChange on the order combobox calling a JS function to set the value of the other combo box... but is there a simpler way?
Here are my comboboxes
<label>Order by:
<select name="o" id="o" onChange="menu.submit();">
<option value="0" <?php if($_GET['o'] == 0) echo 'selected="selected"'; ?>>A - Z</option>
<option value="1" <?php if($_GET['o'] == 1) echo 'selected="selected"'; ?>>Number of Views</option>
</select>
</label>
<label>Direction:
<select name="d" id="d" onChange="menu.submit();">
<option value="0" <?php if($_GET['d'] == 0) echo 'selected="selected"'; ?>>Ascending</option>
<option value="1" <?php if($_GET['d'] == 1) echo 'selected="selected"'; ?>>Descending</option>
</select>
</label>
Why not set the direction based on the order?:
<label>Order by:
<select name="o" id="o" onChange="menu.submit();">
<option value="0" <?php if($_GET['o'] == 0) echo 'selected="selected"'; ?>>A - Z</option>
<option value="1" <?php if($_GET['o'] == 1) echo 'selected="selected"'; ?>>Number of Views</option>
</select>
</label>
<label>Direction:
<select name="d" id="d" onChange="menu.submit();">
<option value="0" <?php if($_GET['o'] == 0) echo 'selected="selected"'; ?>>Ascending</option>
<option value="1" <?php if($_GET['o'] == 1) echo 'selected="selected"'; ?>>Descending</option>
</select>
</label>
Edit: LOL, nm you don't need the tenary operator to do the same thing. Oops, I think I hit the back button or something.. it made me double post.
And, yes you could use javascript to set a default option in the direction selector, but maybe it would be better to have a submit button instead? This gives the user more control over the selectors without causing a page reload.

Categories

Resources