I have jQuery that the function is to show data based on Select Box.
$(document).ready(function(){
$('#balance_month').change(function() {
var badge_id = $("#badge_id").val();
var url = 'fetch_category.php?id=' + $('#balance_month').val() + $('#badge_id').val();
$('#display_area').load(url);
});
});
and this is the HTML :
<select name="balance_month" id="balance_month" class="select">
<option value="">Choose Period</option>
<option value="Jan-<?php echo $years; ?>">January</option>
<option value="Feb-<?php echo $years; ?>">February</option>
<option value="Mar-<?php echo $years; ?>">March</option>
<option value="Apr-<?php echo $years; ?>">April</option>
<option value="May-<?php echo $years; ?>">May</option>
</select>
<table id='display_area'></td>
For first time if I choose 1 of combobox, badge id will show. But if I choose again with other choose, badge id will be undefined.
Try using jquery on/live.... Refer these for examples.....
api.jquery.com/live or api.jquery.com/on
Related
I have drop down boxes related to each other. The second dropdown values are filtered according to first dropdown box value.
Now I want to clone elements in div with class="old_div" into div with class="new_div" and add events to each new elements in div with class="new_div".
ADD
<div class="old_div" >
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM</option>
</select>
<br />
</div>
<div class="new_div">
</div>
I am able to clone elements to new div using Jquery
Jquery code:
$("#add_a").on('click',function(){
var data = $('.old_div').html();
$('.new_div').append(data);
});
$("#select1").on('change', function() {
if($(this).data('options') == undefined){
$(this).data('options',$('#select2 option').clone());
}
var id = $(this).val().trim();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
But how can i make new elements to be related to each other.
I have created fiddle http://jsfiddle.net/6YEQx/ for reference.
You are using id with select box and making duplicates of it, this is causing problem to identify select box using id in jQuery. So use class instead of id.
HTML :
<select name="select1" class="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" class="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM</option>
</select>
Also you are adding elements dynamically so need to bind change event using $(document) and on.
EDIT: also added new line in add_a button script to show all options in second select box initially.
jQuery :
$("#add_a").on('click',function(){
var data = $('.old_div').html();
$('.new_div').append(data);
// to show all options initially and remove any preselected option
$('.new_div').find('.select2:last option').show().removeAttr('selected');
});
$(document).on('change',".select1", function() {
var id = $(this).val().trim();
$(this).next('.select2').find('option').hide();
var $options = $(this).next('.select2').find('option[value=' + id + ']');
$options.show();
$options.first().attr('selected',true)
});
Demo
I have 3 drop down lists, all get there values from an array. I would like to change the selection of the second and third drop down lists when the first box has changed.
i.e.
<select id="first_box">
<option> options 1</option>
<option> options 2</option>
<option> options 3</option>
</select>
<select id="second_box">
<option> options 1</option>
<option> options 2</option>
<option> options 3</option>
</select>
<select id="third_box">
<option> options 1</option>
<option> options 2</option>
<option> options 3</option>
</select>
If you select option 3 in the first box, then change the second and third boxes to option 3
Here's the code I have so far
jQuery(document).ready(function($){
$('#font-name').change(function($){
alert('first box has been changed');
});
});
UPDATE:
Sorry I should of mentioned that the 2nd and 3rd values would be different, I just used the option 1,2, 3 as an example. SORRY.
Here's my actual selection box code
<select id="font-name" name="layout_options[h1_font_name]">
<?php foreach( $fonts as $key => $font ): ?>
<option <?php if($key == $current) echo "SELECTED"; ?> value="<?php echo $key; ?>"><?php echo $font['name']; ?></option>
<?php endforeach; ?>
</select>
<select id="font-font" name="layout_options[h1_font_font]">
<?php foreach( $fonts as $key => $font ): ?>
<option <?php if($key == $current) echo "SELECTED"; ?> value="<?php echo $font['font']; ?>"><?php echo $font['font']; ?></option>
<?php endforeach; ?>
</select>
<select id="font-css" name="layout_options[h1_font_css]">
<?php foreach( $fonts as $key => $font ): ?>
<option <?php if($key == $current) echo "SELECTED"; ?> value="<?php echo $font['css']; ?>"><?php echo $font['css']; ?></option>
<?php endforeach; ?>
</select>
Use change event to select the current value and set to other one
$('#first_box').change(function(){
$("select").not(this).val(this.value);
});
DEMO
IF the drop down values are diff from other then You have to use index for current selected option
$('#first_box').change(function () {
$("select").not(this).find('option:nth-child(' + ($(this).find('option:selected').index() + 1) + ')').prop('selected', true);
});
DEMO
If you need only 2 drop down for knowing ID
$('#first_box').change(function () {
$("#second_box,#third_box").find('option:nth-child(' + ($(this).find('option:selected').index() + 1) + ')').prop('selected', true);
});
You will need to first add some values to your HTML, so you will have something like this:
HTML:
<select id="first_box">
<option value="">-- Please select a value --</option>
<option value="option1">options 1</option>
<option value="option2">options 2</option>
<option value="option3">options 3</option>
</select>
<select id="second_box">
<option value="">-- Please select a value --</option>
<option value="option1">options 1</option>
<option value="option2">options 2</option>
<option value="option3">options 3</option>
</select>
<select id="third_box">
<option value="">-- Please select a value --</option>
<option value="option1">options 1</option>
<option value="option2">options 2</option>
<option value="option3">options 3</option>
</select>
Javascript:
jQuery(function($){
$('#first_box').change(function () {
var first_box_value = $(this).val();
$('#second_box').val(first_box_value);
$('#third_box').val(first_box_value);
});
});
JSfiddle example: http://jsfiddle.net/7q4ct/
Try
jQuery(document).ready(function($){
$('#first_box').change(function($){
var SelectVal=$(this).val();
$('#second_box,#third_box').val(SelectVal);
});
You're looking for what's called a chained select. Here's a php/ajax version:
Chained Select Boxes (Country, State, City)
you have to try something like below i.e try to append dynamically when ever you select ay item from firs drop down
$('#ddl1').change(function () {
//empty lists 2 and 3
$('#ddl2').html("");
$('#ddl3').html("");
var option_selected = $('option:selected', this).val();
//populate ddl2
$.each(data[option_selected]['Cities'], function (index, element) {
$('#ddl2').append($('<option>', {
value: element
}).text(element));
});
//populate ddl3
$.each(data[option_selected]['States'], function (index, element) {
$('#ddl3').append($('<option>', {
value: element
}).text(element));
});
});
Please look at the Cascading Dropdown
With example
var drop2 = $("select[name=drop2] option"); // the collection of initial options
$("select[name=drop1]").change(function(){
var drop1selected = parseInt(this.value); //get drop1 's selected value
$("select[name=drop2]")
.html(drop2) //reset dropdown list
.find('option').filter(function(){
return parseInt(this.value) < drop1selected; //get all option with value < drop1's selected value
}).remove(); // remove
});
http://jsfiddle.net/HTEkw/
Hope this helps...
Try this
$(document).ready(function()
{
$("#first_box").change(function()
{
var sel = $(this).val();
$("#second_box").val(sel);
$("#third_box").val(sel);
});
});
Fiddle: http://jsfiddle.net/eLtNG/
$('#first_box').change(function($){
if($('#first_box').val()=='option 3'){
$('#second_box, #third_box').val('option 3');
}
});
I have a problem which I'm not sure how to approach, I have a WP plugin which has a form, in the form I have a with result that could have varied amount of data (depending on what the user submits).
How can I add 'selected' to the selected item so when the user returns he can edit/view the item he selected?
<select name="supplier">
<option value="Supplier 1">Supplier 1</option>
<option value="Supplier 2">Supplier 2</option>
<option value="Supplier 3">Supplier 3</option>
<option value="Supplier 4">Supplier 4</option>
</select>
A loop comes to mind, shall I assign a number to each option? There may be 100 suppliers so it would need to count right?
I would use a loop like...
$theirChosenSupplier = $supplierVarFromDatabaseOrWherever;
?>
<select name="supplier">
foreach($allSuppliers as $individualSupplier) {
if($individualSupplier == $theirChosenSupplier) {
$selected = "selected";
} else {
$selected = "";
}
?><option value="<?php echo $individualSupplier; ?>" <?php echo $selected; ?>>
<?php echo $individualSupplier; ?>
</option>
<?php } ?>
</select>
This code isn't tested but should give you an idea. Apologies if I've misunderstood the question.
adding an id is always a good thing. Assuming this is wordpress generated and you don't have a loop already there is always the option of using javascript and maybe an onchange event.
I dont know if the form is submitted first or you do some other stuff but maybe:
<select id="foo">
<option id="provider_1">Provider 1</option>
<option id="provider_2">Provider 2</option>
</select>
<script type="text/javascript">
window.onload = function() {
var selectedValue = '<?php echo someEscapeFunction($_SESSION['id_provider']); // or _GET, _POST ?>';
document.getElementById('foo').selectedIndex = document.getElementById(selectedValue).index;
}
</script>
i want to display 2x dropdown menus both will be pre populated (2nd menu "mainToon" will contain over 200 names but for the example i have shown just a few.
<select id="category" name="Category">
<option value=" "></option>
<option value=" ">-----------------</option>
<option value="Main Toon">Main Toon</option>
<option value="Alt Toon">Alt Toon</option>
<option value="Cyno Toon">Cyno Toon</option>
<option value="Super Toon">Super Toon</option>
<option value="Dust Toon">Dust Toon</option>
</select>
<select id="mainToon" name="mainToon">
<option value=" "></option>
<option value=" ">-----------------</option>
<option value="Agmar">Agmar</option>
<option value="S Tein">S Tein</option>
<option value="Karades">Karades</option>
<option value="Bad Kharma">Bad Kharma</option>
<option value="Ed jeni">Ed Jeni</option>
</select>
by default the first dropdown will show blank and i want the "mainToon" dropdown to be hidden untill any of the following are selected:
"Alt Toon",
"Cyno Toon",
"Super Toon",
"Dust Toon"
Then the form will be visable.
Can i do this by applying a .hidden css code to the dropdown and changing the class dynamically when other options are selected?
many thanks for the help.
First hide your dropdown :-
<select id="mainToon" name="mainToon" style="display:none;">
</select>
And use Jquery show hide function like this :-
$(document).ready(function(){
$("#category").change(function(){
var value = $(this).val();
if(value=="Alt Toon" || value=="Cyno Toon")
{
$("#mainToon").show();
}
else
{
$("#mainToon").hide();
}
});
});
Below show the DEMO how to show DIV based on selection value ,
$(function() {
$('#colorselector').change(function(){
$('.colors').hide();
$('#' + $(this).val()).show();
});
});
And Here is working demo.
I'm trying to select the option based on the php variable value. So I need option value=1 is selected in the first <select> and option value=6 selected in second . Since I have a bunch of other <select> in the form, eventually, I will have an php array of some values, and I need each of the value match up with the option value under corresponding index in the a group of <select> that sharing the same class='si_1', and assign selected to that option.
Thanks
php part
<?php
$select_1 = "1";
$select_2 = "6";
?>
JQuery part
$(document).ready(function(){
var sel_class = $(".si_1");
var array = {"<?php echo $select_1?>","<?php echo $select_2?>"};
JQuery.each(array, function(index, value) {
var current = sel_class.get(index);
$(current + " option[value=" + value + "]").attr('selected', 'selected');
});
});
I don't know if $(current + " option[value=" + value + "]") is the correct syntax to target the <select> at index in $(".si_1") that has option where the option attribute value has value that's at index in array
HTML part
<select class="si_1">
<option value="1">Test 1</option>
<option value="3">Test 3</option>
<option value="5">Test 5</option>
<option value="7">Test 7</option>
</select>
<select class="si_1">
<option value="2">Test 2</option>
<option value="4">Test 4</option>
<option value="6">Test 6</option>
<option value="8">Test 8</option>
</select>
You can do this in the JavaScript:
selectedVal1 = "<?= $select_1; ?>";
selectedVal2 = "<?= $select_2; ?>";
When the client looks at it, it will look like this:
selectedVal1 = "1";
selectedVal2 = "6";
Then it's just using jQuery to set the selected attribute to selected (Just do .attr('selected', 'selected'))