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'))
Related
I have the following HTML code for my element and it is populated with elements.
<select name="category" class = "form-control">
<option value = "Awearness">Awearness</option>
<option value = "ITandTechnology">IT and Technology</option>
<option value = "Physics">Physics</option>
<option value = "Sport">Sport</option>
<option value = "Science">Science</option>
<option value = "Social">Social</option>
</select>
I also have PHP code above tag that gets me value of category from MySQL database. So for example:
...$category = "Sport";...
What I need to know is, is there a way to select certain option when page loads that corresponds to $category variable I got in PHP?
So if
...$category = "Sport";...
it selects the Sport option from tags.
To set an option as selected on page load we can use the selected attribute.
<option value="some-value" <?= $category == 'some-value' ? 'selected' : '' >>....</option>
Then do the same for each option in your list.
I suggest using JavaScript along with your php.
For example,
<?php
$cat = 'Sport';
?>
<!DOCTYPE html>
<html>
<body>
<select name="category" class = "form-control" id = "i1">
<option value = "Awearness">Awearness</option>
<option value = "ITandTechnology">IT and Technology</option>
<option value = "Physics">Physics</option>
<option value = "Sport">Sport</option>
<option value = "Science">Science</option>
<option value = "Social">Social</option>
</select>
<script>
var a= document.getElementById('i1');
a.getElementsByTagName('option');
for(i=0;i<a.length;i++)
{
if(a[i].value=='<?php echo $cat;?>')
{
a[i].setAttribute("selected","selected");
break;
}
}
</script>
</body>
</html>
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 am new to web development, need help with PHP coding for a form.
A form with 5 dropdown list needs to be created. The values in 1st dropdown list would be "A,B,C,D,E,F,G". If suppose "C" is selected in 1st dropdown, then 2nd dropdown will have all the values except "C" i.e; "A,B,D,E,F,G". If suppose we select "A" in second dropdown, the values shown in 3rd dropdown would be all the values except the value chosen in dropdown 1 & 2. So value in dropdown 3 would be "B,D,E,F,G.
Similarly, it will happen for other two dropdown boxes.
One way you could try is to keep track of what options need to be removed in an array. Then you could define which select controls which. Take this example:
given this html
<select id="a" var="b">
<option>-- SELECT --</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
<select id="b" var="c" disabled>
<option>-- SELECT --</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
<select id="c" disabled>
<option>-- SELECT --</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
you could use this jquery
var doNotShow = [];
$('select').change( function() {
var nextSelect = $(this).attr("var");
doNotShow.push($(this).val());
$.each(doNotShow, function( index, value ) {
$("#" + nextSelect + " option[value='" + value + "']").prop('disabled', true);
});
$("#" + nextSelect).prop('disabled', false);
$(this).prop('disabled', true);
});
doNotShow.push($(this).val()); keeps track of all the previously selected values, then the $.each removes (or in this case, disables) the unwanted options from the next select in line, which is stored in the select's var property.
Here's an example.
This will be done with jquery or even with Javasript, with jQuery you can read the documentation of .change() function, and for Javascript with the onchange Attribute, try to read this question it will help you a little bit : HTML SELECT - Trigger JavaScript ONCHANGE event even when the option is not changed
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