I have a drop down list. I have made it hidden at the start but whenever a specific button say TEST is clicked i want that list to be displayed. Also on each click I want it to be displayed. If the button is clicked 3 times then 3 drop downs and so on. At the moment the dropdown is being displayed only once when the button is clicked.
Don't bother the PHP code inside it.
<p>
<label for ="test">TEST:</label>
<input type="button" name="test" value="testing" onclick="display()"/>
<?php
echo '<select name="LIVINGSTYLE" id="test">';
// some code here
echo '</select>';
?>
</p>
My Javascript function:
function ondisplay()
{
document.getElementById("test").style.display="block";
}
Your onclick handler is display() however your function name is ondisplay
Try something like this;
Try the following;
Javascript;
<script type="text/javascript">
function showHide(obj)
{
var div = document.getElementById(obj);
if (div.style.display == 'none')
{
div.style.display = '';
}
else
{
div.style.display = 'none';
}
}
</script>
HTML;
CLICK ME
<div id="UMAR" style="display: none;">
Assalam-o-Alaikum !!!
</div>
jQuery solution, here's a Fiddle, with this you can display infinite select boxes.
<label for ="test">TEST:</label>
<input id="test" type="button" name="test" value="Testing"/>
$(function(){
$('#test').click(function(){
$('body').append('<select name="LIVINGSTYLE" id="test">'+
'<option value="1">Option 1</option>'+
'<option value="2">Option 2</option>'+
'<option value="3">Option 3</option>'+
'<option value="4">Option 4</option>'+
'</select>');
});
});
Related
this is my first question and after grinding through several threads on here I am still completely lost and can't find a proper solution to my problem.
What I want to do?
A select Box with various options, each options is connected with a JQuery script which makes a related div visible when selected.
<center>
<select onclick="changeview()">
<option value="foo" id="location1" class="ticketbuttons my_active">Location 1</option>
<option value="bar" id="location2" class="ticketbuttons">Location 2</option>
</select>
</center>
When you switch between the options, I want specific DIVs to appear or not appear by this script
<script>
jQuery( document ).ready(function() {
jQuery( "#location1" ) function changeview() {
jQuery(".changing_ticket").hide();
jQuery("#loc1").fadeToggle();
jQuery(".ticketbuttons").removeClass("my_active");
jQuery("#location1").addClass("my_active");
alert('Hello1');
});
jQuery( "#location2" ) function changeview() {
jQuery(".changing_ticket").hide();
jQuery("#loc2").fadeToggle();
jQuery(".ticketbuttons").removeClass("my_active");
jQuery("#location2").addClass("my_active");
alert('Hello2');
});
jQuery( "#location3" ) function changeview() {
jQuery(".changing_ticket").hide();
jQuery("#loc3").fadeToggle();
jQuery(".ticketbuttons").removeClass("my_active");
jQuery("#location3").addClass("my_active");
alert('Hello3');
});
jQuery( "#location4" ) function changeview() {
jQuery(".changing_ticket").hide();
jQuery("#loc4").fadeToggle();
jQuery(".ticketbuttons").removeClass("my_active");
jQuery("#location4").addClass("my_active");
alert('Hello4');
});
});
</script>
and last but not least the frontend output
<div id="loc1" class="change_ticket">Info about location 1</div>
<div id="loc2" class="change_ticket hidden">Info about location 2</div>
I have read about several options like change, onselect, on("change", function () .. and tested but nothin really worked for me.
Hope someone can help me! Thanks in advance!
You could try something like this. Create a variable to store the value of the select dropdown ID & then check which option is selected and hide() the other values and display only the one necessary.
<!-- original dropdown. Replaced by updated for loops in PHP
<center>
<select id="changeEvent">
<option value="1">Location 1</option>
<option value="2">Location 2</option>
<option value="3">Location 3</option>
<option value="4">Location 4</option>
</select>
</center>
-->
<!-- Changes made for dynamic option list-->
<!--Add a data attribute for counter to pass to your jquery loop-->
<center>
<!-- Counter used for creating number of necessary options-->
<?php $counter = 20;?>
<select id="changeEvent" data-counter-id="<?php echo $counter;?>">
<?php
for($i = 1;$i <= $counter; $i++){
?>
<option value="<?php echo $i;?>">Location <?php echo $i;?></option>
<?php
}
?>
</select>
</center>
Your divs use the same counter variable
<!-- Original divs. Replaced by for loop to create dynamic option list
<div id="loc1>" style="display:none;">Info about location 1</div>
<div id="loc2>" style="display:none;">Info about location 2</div>
<div id="loc3>" style="display:none;">Info about location 3</div>
<div id="loc4>" style="display:none;">Info about location 4</div>
-->
<?php
for($x = 1;$x <= $counter; $x++){
?>
<div id="loc<?php echo $x?>" style="display:none;">Info about location <?php echo $x?></div>
<?php
}
?>
In your jQuery function you could add an on('change') event instead of inline on your select dropdown & grab the value of the Select option list and do a check to see which one was selected and display the appropriate DIV. Add a fadeIn() to the item you want to show()
<script>
$(document).ready(function() {
$("#changeEvent").on('change', function() {
/*Original code
var options = $(this).val();
if(options == '1'){
$("#loc1).fadeIn('slow').show();
$("#loc2).hide();
$("#loc3).hide();
$("#loc4).hide();
}else if(options == '2'){
$("#loc1).hide();
$("#loc2).fadeIn('slow').show();
$("#loc3).hide();
$("#loc4).hide();
}else if(options == '3'){
$("#loc1).hide();
$("#loc2).hide();
$("#loc3).fadeIn('slow').show();
$("#loc4).hide();
}else{
$("#loc1).hide();
$("#loc2).hide();
$("#loc3).hide();
$("#loc4).fadeIn('slow').show();
}
*/
/* This will loop through options and display the selected*/
var options = $(this).val();
var counter = $(this).data("counter-id");
for(let i = 1; i <= counter; i++){
if(options != i){
$("#loc" + i).hide();
}else{
$("#loc" + options).fadeIn('slow').show();
}
}
});
});
</script>
Try using onchange instead of onclick on the select tag
<select onchange="changeview()"></select>
or you could try putting ID on the select tag and do some jQuery
<select id="selectOption"></select>
jQuery
$(document).on('change','#selectOption', function () {
// DO THINGS HERE
});
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.
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.
I have two dropdown boxes for car makes and models, when a make is selected i need all its models to show in the next box. As of now using the following code the models show up when the dropdown is clicked.
window.onmousedown = function(e){
this.id = e.target.id;
if(this.id == "vehicle_makes"){
var make = document.getElementById("vehicle_makes").value;
ajaxCall(make);
}
}
However i need the javascript to trigger when an option from the dropdown is selected rather than when the drop down is opened.
here also is the html - with some php
<div class="vehicle-search-wrap">
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<div>
<select id="vehicle_makes" name="s">
<?php
foreach($makes as $make){ //put all makes in dropdown
echo "<option value='". $make ."'>". $make ."</option>";
}
?>
</select>
<select id="model_drop" name="vmodels">
<?php
//nothing to start
?>
</select>
<input type="submit" value="Search Vehicle" />
</div>
</form>
</div>
use the onchange event of selectbox.
here is a demo
Try this:
<select name="Pizza" size="5"
onchange="myFunctionHere()">
<option value="P101">Pizza Napoli</option>
<option value="P102">Pizza Roma</option>
</select>
i have two select options but i found little complication between them in the javascript.
here is my javascript code :
function displayVals() {
var singleValues = $("select option:selected").text(); //to stay slected
$("#hiddenselect").val(singleValues); //hidden field of second select option
$("samp").html("" + singleValues); // this to insert text between samp tags
$("select > option:first").prop("disabled", "disabled") // this to disable first option
}
$(document).ready(function(){
$("select").change(function() {
displayVals();
});
displayVals();
$("select#menucompare").change(function() {
$("#aform").submit(); // second select options to submit
});
$("select#infmenu").change(function() {
$("#infform").submit(); // first select options to submit
});
});
now what i expect is :
- only the first select options ( the first option is disabled), need the second select option also (the first option be disabled)
here is my html code
my first select option :
<form action="" id="infform" method="post">
<select id="infmenu" name ="infmenu" size="1" class="select" onchange="submitinfform()" >
<option value="0" >Please Select your country</option>
<option value="<?php echo $row9['id'] ;?>" <?php if ($_SESSION['infmenu'] == $row9['id']) { echo " selected='selected'"; } ?> ><?php echo $row9['name'] ;?></option><?php } ?>
</select>
<input type="hidden" name="hiddenselect" value="<?php echo $infmenu; ?>" />
</form>
this the second select options
<form id="aform" method="post">
<select id="menucompare" name ="menucompare" size="1" class="select" onchange="submitaform()">
<option value="0">Select one</option>
<option value="west" <?php if ($menucompare == "west") { echo " selected='selected'"; } ?> >West</option>
<option value="est" <?php if ($menucompare == "est") { echo " selected='selected'"; } ?> >Est</option>
</select>
<input type="hidden" name="hiddenselect" value="<?php echo $menucompare ; ?>" />
</form>
i have spent on this many days no luck
thanks for your time
Not able to understand you code well. Here is little help for you to try:
To get selected value (value attribute) of the first select element use:
$("#infmenu").val();
To get selected value (value attribute) of the first select element use:
$("#menucompare").val();
To disable first option in first select called "infmenu":
$("option", "#infmenu").first().attr("disabled", "disabled");
To disable first option in second select called "infmenu":
$("option", "#menucompare").first().attr("disabled", "disabled");
To get displayed text of the first select element use:
$("option:selected", "#infmenu").text();
To get displayed text of the second select element use:
$("option:selected", "#menucompare").text();
The jQuery selector that you're using is $("select option:selected"). This means "find all <option> tags that are selected and are children of a <select> element."
You have two <select> elements, so your selector is matching both of them. If you want to match a specific one, you'll need to refine your selector. Since you already have an ID attribute on the second one, try using $("#menucompare option:selected").
Change:
var singleValues = $("select option:selected").text(); //to stay slected
To:
var singleValues = $("#menucompare option:selected").text(); //to stay slected
You want to choose the second select tag. so you have to change your jquery selector in line 2:
var singleValues = $("select:nth-child(2) option:selected").text();