I've to select boxes:
<select name="select1" id="select1" multiple="multiple">
<option value="8">Civics</option>
<option value="9">English</option>
<option value="10">Economics</option>
</select>
<select id="select2" size="4" multiple="multiple" name="select2[]">
<option value="1">Maths</option>
<option value="2">Physics</option>
<option value="3">Chemistry</option>
<option value="4">Biology</option>
<option value="5">History</option>
<option value="7">Social Studies</option>
<option value="11">Geography</option>
</select>
The data for both the boxes is fetched from the db on page load.
The idea is to either add/delete options from the select2 and save it to a table in the db. I delete the existing data in the table before updating it.
The issue I'm facing is while saving the data, only the new options which are added to the select2 are getting saved and if I remove any options, I'm getting an index out of bounds error. How do I make sure that the values which are already there in the select2 on page load are read as well?
The php code is as follows:
<?php
if(isset($_POST['save']))
{
$qry = 'delete * from table_sel2';
$exec = mysqli_query($conn,$qry);
foreach ($_POST['select2'] as $sel_val)
{
echo $sel_val;
$sql = "insert into table_sel2 (select2,status_id) values (".$sel_val.",1)";
$result = mysqli_query($conn,$sql);
}
$message = "Done!";
}
?>
Jquery code to move data between the selectboxes:
$('#add').click(
function(e)
{
$('#select1 > option:selected').appendTo('#select2');
});
$('#remove').click(
function(e)
{
$('#select2 > option:selected').appendTo('#select1');
});
Select all options from select2 upon form submission like this -
submit_bttn.click(function () {
$('#select2 option').each(function () {
$(this).attr('selected', true);
});
});
Related
I want to generate dynamic form based on select box change value.
Suppose i have a parent select box :
<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>
below select box is depend on first
<select name="select2" id="select2">
<option value="banana">Banana</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</select>
Here is my 2 select boxes and i want 2 things
1) create dependency of 2 this select box
2 ) I want to generate a dynamic form based on change second select box value.
for example if i select apple then a form open with related apple value.
I am a new in jquery and i do not have any idea about it ( share me code script if any one knows)
You can follow this way to making a dynamic dropdown.
The following HTML code contains dependent dropdowns for countries and states. Country options are read from the database and shown in the dropdown on page load. Initially, the state dropdown has no options. On changing the country dropdown values, a jQuery function is called to get dependent state options and loaded dynamically.
<div class="frmDronpDown">
<div class="row">
<label>Country:</label><br/>
<select name="country" id="country-list" class="demoInputBox" onChange="getState(this.value);">
<option value="">Select Country</option>
<?php
foreach($results as $country) {
?>
<option value="<?php echo $country["id"]; ?>"><?php echo $country["name"]; ?></option>
<?php
}
?>
</select>
</div>
<div class="row">
<label>State:</label><br/>
<select name="state" id="state-list" class="demoInputBox">
<option value="">Select State</option>
</select>
</div>
</div>
The following jQuery script shows a function to send an AJAX request to PHP to read state list depends on the selected country. This AJAX call is set with the selected country id.
<script>
function getState(val) {
$.ajax({
type: "POST",
url: "get_state.php",
data:'country_id='+val,
success: function(data){
$("#state-list").html(data);
}
});
}
</script>
In PHP, it connects the database to retrieve “states” table values based on the country id passed by jQuery AJAX call. It forms state dropdown options and returns as the AJAX response. This response is inserted to the state dropdown.
<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
if(!empty($_POST["country_id"])) {
$query ="SELECT * FROM states WHERE countryID = '" . $_POST["country_id"] . "'";
$results = $db_handle->runQuery($query);
?>
<option value="">Select State</option>
<?php
foreach($results as $state) {
?>
<option value="<?php echo $state["id"]; ?>"><?php echo $state["name"]; ?></option>
<?php
}
}
?>
I use select as below:
<select name="account_type" required>
<option value="">Choose Account Type</option>
<option value="1">Asset</option>
<option value="2">Bank</option>
<option value="3">Capital</option>
<option value="4">Cash</option>
<option value="5">Expense</option>
<option value="6">Income</option>
<option value="7">Liability</option>
</select>
Now I want to catch those option values using php variable, and here is the important part: I will have an input field, and based on the values I want to enable/disable that input filed.
How can I do that?
Using jQuery give your select an id like below
<select name="account_type" id="account" required>
<option value="">Choose Account Type</option>
<option value="1">Asset</option>
<option value="2">Bank</option>
<option value="3">Capital</option>
<option value="4">Cash</option>
<option value="5">Expense</option>
<option value="6">Income</option>
<option value="7">Liability</option>
</select>
<!--input to be disabled -->
<input type="text" id="disable">
jQuery
$('#account').on('change', function(){
if($(this).val() === '1') {
$("#disable").prop('disabled', true);
//you can also send data to PHP here using AJAX
//var data = {one: $(this).val()};
//$.post( "test.php", data, function( data ) {
//$( ".result" ).html( data );
//});
}else if($(this).val() === '2') {
//code here
}
//check for other values
});
example
You could do this with jQuery. If you don't know jQuery, check this out: jQuery.com
After you "installed" jQuery, you can use this in your js-File. I hope that you know how to create and use a js-File.
The next thing is to implement a good method for your select-button.
This could look like this in your js-File:
$('#my-select').change(function(){ // "#my-select" is the ID of your select. You need to implement a ID.
//do stuff here, eg.
if ($(this).val() == '5') { //check the selected option etc.
$("input").prop('disabled', true);
} else {
$("input").prop('disabled', false);
}
});
Here's a jsFiddle.
Hope this helps you.
html code
<select>
<option data-id="1">1</option>
<option data-id="2">2</option>
</select>
JQuery code
$(document).ready(function(){
$("select").change(function(){
var display= $("select").val();
if(display == 1){
$("select").attr("disabled", 'disabled');
}
});
});
I am not sure what you want exactly.check out this may be it will be helpful for you JSFiddle
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'm new with this JQuery Mobile thing. And the first problem i met in this is i can't set "selected" attr on multiple select option to "false" / unselected in JQuery mobile using Javascript.
A documentation i found told me to refreshing a select so i can manipulate it via javascript here in the bottom of it's page:
http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-selects.html
I've done it. But i don't know if i did it wrong or what. Here is my code :
<script type="text/javascript">
function SelectAll(){
var select=document.getElementById('sfruit');
if (select.options[1].selected == true){
alert('All Selected');
for (x in select.options){
if(x > 1){
if (select.options[x].selected == true){
alert(select.options[x].value+' selected');
RefreshSelect();
select.options[x].selected == false;
}else{
alert(select.options[x].value+' unselected');
}
}
}
}
}
function RefreshSelect(){
var myselect = $("select#sfruit");
myselect[0].selectedIndex = 5;
myselect.selectmenu("refresh");
}
</script>
<select onChange="SelectAll()" data-native-menu="false" id="sfruit" name="sfruit" multiple>
<option>Select Fruit</option>
<option value="all" selected>All</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="grape">Grape</option>
<option value="melon">Melon</option>
</select>
What i actually want is when i select "All" option, other option that have been selected become unselected.
I'll attaching the image if u all still doesn't understand what i mean, later, it's already late here.
Thanks guys. And please help me. .. :)
I think this is what you want
$(window).load(function(){
$("select#sfruit").change(function () {
$("select#sfruit option:selected").each(function (obj) {
if($(this).index()==1){
alert('All Selected');
$("select#sfruit option:selected").removeAttr("selected");
$("select#sfruit option:eq(1)").attr("selected","");
}
});
});
});
<select data-native-menu="false" id="sfruit" name="sfruit" multiple>
<option>Select Fruit</option>
<option value="all" selected>All</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="grape">Grape</option>
<option value="melon">Melon</option>
</select>
i need some clarification on how to populate select(s) with data from mysql. Basically what I am trying to do is:
There will be a first select box with some data in it.
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
when the user selects a option in the first select,
there is a second select below that, which should reflect the values according to the selection made in the first select.
<select>
<option>1.1</option>
<option>1.2</option>
<option>1.3</option>
</select>
The data is commin from MySQL. I am not sure if need to post to same page, but if I do, how to retain the values alredy selected in the previous select boxes? do i need to use javascript?
any help?
Thanks.
You should use javascript so you don't need a page refresh. I just re-read your question and I'll have a solution involving an AJAX request in a second to pull dynamic data:
HTML
<select name="select1" id="select1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="select2" id="select2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
jQuery
<script type="text/javascript">
$(document).ready(function() {
$('#select1').change(getDropdownOptions);
});
function getDropdownOptions() {
var val = $(this).val();
// fire a POST request to populate.php
$.post('populate.php', { value : val }, populateDropdown, 'html');
}
function populateDropdown(data) {
if (data != 'error') {
$('#select2').html(data);
}
}
</script>
populate.php
<?php
if (!empty($_POST['value'])) {
// query for options based on value
$sql = 'SELECT * FROM table WHERE value = ' . mysql_real_escape_string($_POST['value']);
// iterate over your results and create HTML output here
....
// return HTML option output
$html = '<option value="1">1</option>';
$html .= '<option value="b">B</option';
die($html);
}
die('error');
?>