My goal is to show a second "select" in a "div" with options depending on the selection made by the user on the first "select".
The first "select" is a list of regions, while the second is the list of provinces in the forementioned region.
The function 'change' should update the div 'province', passing a value to another php file used for determining the provinces, with the second select but that doesn't happen.
Main page:
<?php
$region= array("","Abruzzo", "Basilicata", "Calabria");
?>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
function change(value) {
$('province').load('select.php?id='+ value);
}
</script>
<body>
<div>
<select onchange="change.call(this.value)">
<?php
for($i=0;$i<count($region);$i++)
{
echo "<option value=".$i.">".$region[$i]."</option>";
}
?>
</select>
</div>
<div id="province"></div>
</body>
</html>
Script for updating:
<?php
$vector=array(1 =>array("CH","AQ","PE","TE"),
2 => array("MT","PZ"),
3 => array("CZ","CS","KR","RC","VV"));
$id = $_GET['id'];
if($id==0)
{
echo "";
}
else{
for($i=1;$i<(count($vector)+1);$i++)
{
$n=key($vector)
if($n==$i)
{
echo "<select>";
$content=current($vector);
for($k=0;$k<count($content);$k++)
{
echo "<option>".$content[$k]."<option>";
}
echo "</select>";
break;
}
else
{
next($vector);
}
}
}
?>
You're missing the id selector # in :
$('#province').load('select.php?id='+ value);
Hope this helps.
function change(_this) {
console.log(_this.value)
$('#province').load('select.php?id='+ _this.value);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select onchange="change(this)">
<option value="0"></option>
<option value="1">Abruzzo</option>
<option value="2">Basilicata</option>
<option value="3">Calabria</option>
</select>
</div>
<div id="province"></div>
You are missing the # from the id selector and the ; from $n=key($vector) in your PHP file used for update. Also, if you tagged your question jQuery you should use it. Inline onchange is deprecated and I will recommend you NOT to use it anymore.
Change this:
$n=key($vector)
to this:
$n=key($vector);
jQuery code should look like this:
$('select').on('change', function() {
var selected = $(this).find(":selected").val();
$('#province').load('send.php?id=' + selected);
});
And HTML like this:
<div>
<select name='select'>
<?php for($i=0;$i<count($region);$i++) { echo "<option value=".$i. ">".$region[$i]. "</option>"; } ?>
</select>
</div>
<div id="province"></div>
**Main page:**
<?php
$region= array("","Abruzzo", "Basilicata", "Calabria");
?>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#region").change(function(){
var value=$(this).val();
$("#province").load('select.php?id='+value);
});
});
</script>
<body>
<div>
<select id="region" >
<?php
for($i=0;$i<count($region);$i++)
{
echo "<option value=".$i.">".$region[$i]."</option>";
}
?>
</select>
</div>
<div id="province"></div>
</body>
</html>
**Script for updating:**
<?php
$vector=array(1 =>array("CH","AQ","PE","TE"),
2 => array("MT","PZ"),
3 => array("CZ","CS","KR","RC","VV"));
$id = $_GET['id'];
if($id==0)
{
echo "";
}
else{
if(array_key_exists($id,$vector))
{
echo "<select>";
for($i=0;$i<(count($vector[$id]));$i++)
{
echo "<option>".$vector[$id][$i]."</option>";
}
echo "</select>";
}
}
?>
Related
This is my view file code
<?php for($i=0; $i<4; $i++) { ?>
<div class="box22">
<div class="mcm">
<input type="text" placeholder="Myself" id="coworkers" name="coworkers[]" />
<span class="bar"></span>
</div>
<div class="select2">
<select id="category_<?php echo $i; ?>" name="category[]" class="chosen-select ref-sel1" multiple >
<?php
foreach($genre as $gen){
echo '<option value='.$gen->genre_id.'>'.$gen->genre_name.'</option>';
}
?>
</select>
</div>
</div>
<?php } ?>
my script : when i chose one or more from option, it does not comes into script. How to get multiple values under loop
$(document).ready(function()
{
$('form#shortfilm').submit(function(e)
{
e.preventDefault();
var form = $(this);
var foo = [];
$('#category :selected').each(function(i, selected){
foo[i] = $(selected).text();
});
});
});
change text to val()
$('option:selected').each(function(i, selected){
foo.push($(selected).val());
});
or:
var foo = [];
$('.box22').each(function(x,v){
var temp =[]
$(v).find('option:selected').each(function(i, selected){
temp.push($(selected).val());
});
foo.push(temp)
});
see demo for the second option here
Please run this sample code. This may help you
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<form id="shortfilm" name="data">
<?php $genre=array(1=>'AAAAAAAAAAAAAA',2=>'BBBBBBBBBBBBBBB',3=>'CCCCCCCCC',4=>'DDDDDDDDDDDDDD',5=>'EEEEEEEEEEEEEEE');
for($i=0; $i<4; $i++) { ?>
<div class="box22">
<div class="mcm">
<input type="text" placeholder="Myself" id="coworkers" name="coworkers<?php echo$i?>[]" />
<span class="bar"></span>
</div>
<div class="select2">
<select class="category" name="category<?php echo$i?>[]" class="chosen-select ref-sel1" multiple >
<?php
foreach($genre as $key => $gen){
echo '<option value='.$key.'>'.$gen.'</option>';
}
?>
</select>
</div>
</div>
<?php } ?>
<input type="submit" value="submit" />
</form>
<script>
$(document).ready(function()
{
$('form#shortfilm').submit(function(e)
{
e.preventDefault();
var form = $(this);
var foo = [];
$('.category :selected').each(function(i, selected){
foo[i] = $(selected).text();
});
console.log(foo);
});
});
</script>
</body>
</html>
Using the .val() function on a multi-select list will return an array of the selected values:
var selectedValues = $('#category').val();
And in your html <select id="category" multiple="multiple">
Also put the values of the $gen->genre_id in a variable and so like this
foreach($genre as $gen){
$genId = $gen->genre_id;
$genName = $gen->genre_name;
echo '<option value='.$genId.'>'.$genName.'</option>';
}
Also <select id="category" in a forloop will have many select elements with the same id,change that to category[$i] or use class
My Code:
select name="accttype">
<?php foreach($query as $row)
{
$act=$row->accounttype;
?>
<option value="<?php echo$act;?>"><?php echo$act;?></option>
<?php
}
?>
</select>
When I select the dropdown list I want to to redirect different functions to load different pages, like:
<option value="<?php echo site_url('Controller_n/function'><?php echo$act;?></option>
Is this possible?
Check this sample:
<select id="accttype" name="accttype">
<?php foreach($query as $row)
{
$act=$row->accounttype;
?>
<option value="<?php echo $act ?>"><?php echo $act ?></option>
<?php } ?>
</select>
<script>
$(function(){
// bind change event to select
$('#accttype').on('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = url; // redirect
}
return false;
});
});
</script>
Give a id to your select like below
<select id="accttype">
<?php foreach($query as $row)
{
$act=$row->accounttype; ?>
<option value="<?php echo$act;?>"><?php echo$act;?></option>
<?php } ?>
</select>
// add jquery library if you not added already
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#accttype').change(function(){
window.location = $(this).val();
});
});
</script>
Hope it will help you.
I have one select box.on change event of it, I call confirm box. When I clicked on cancel button then remains changed value.
So I want to refresh only select box not whole page.
function statusChanged(obj,id){
$(obj).change(function() {
var answer = confirm ("Are you sure update Status?");
var status;
if(answer){
status=$(this).val();
//alert(status);
ajaxUpdate("service-providers.php", {action:"updatestatus",'status': status,'id':id}, function(data) {
if(data.type=="success") {
$("#notify").notification({caption:"Status Updated Successfully.", type:"information", sticky:false ,onhide:function(){
window.location="service-providers.php";
}
});
}
});
}
else{
// here i want to refresh select box
}
});
}
html code:
<select id="status1" name="status1" style="width:140px;" onChange="statusChanged(this,<?php echo $applicationid; ?>);">
<?php
if($status==3 || $status==4)
echo "<option value='4'>Submitted</option>";
else
echo "<option value='0'>Select</option>";
?>
<option value="2" <?php if($status==2) echo "selected='selected'"; ?> >Approved</option>
<option value="3" <?php if($status==3) echo "selected='selected'"; ?> >Rejected</option>
</select>
after page loads do:
$('select').each(function() {
$(this).attr('original_data', $(this).val());
});
and in your function do
$(this).val(this.attr('original_data'));
Checked. Works perfectly.
use this code under else it will just reset select box.
This will work
$('#SELECTBOX_ID').prop('selectedIndex',0);
see the for http://jsfiddle.net/TmJCE/10/ working demo.
also I implemented this code in my local I mainly made two changes I removed onchange from select and second is I did not use ajax coz you only want to work on click of cancel on confirm box.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function () {
jQuery("#status1").change(function() {
var answer = confirm ("Are you sure update Status?");
var status;
if(answer){
status=$(this).val();
//I have did not call ajax
}
else{
jQuery('#status1').prop('selectedIndex',0);
}
});
});
</script>
<?php
$status = 0; // I temporary added t
?>
<select id="status1" name="status1" style="width:140px;" >
<?php
if($status==3 || $status==4)
echo "<option value='4'>Submitted</option>";
else
echo "<option value='0'>Select</option>";
?>
<option value="2" <?php if($status==2) echo "selected='selected'"; ?> >Approved</option>
<option value="3" <?php if($status==3) echo "selected='selected'"; ?> >Rejected</option>
</select>
I have a problem in hiding a list menu generated dynamically with php. My browser didn't hide it. I am using Firefox; the code is like this:
<div id="groupstd">
<br />
<select style="text-align:center;" name="std3">
<option value="Select" selected="selected">Please Select Student.no#3</option>
<?php
$result=Connect();
if($result>0)
{
while($row = mysql_fetch_array($result))
{
echo '<option value=$row[\'Roll#\'].\'i-\'.$row[\'Batch\']>$row[\'Roll#\'].\'i-\'.$row[\'Batch\']</option>';
}
}?>
</select>
</div>
<div id="grpstd">
<br />
<select style="text-align:center;" name="std4" id="std4">
<option value="Select" selected="selected">Please Select Student.no#4</option>
<?php
$result=Connect();
if($result>0)
{
while($row = mysql_fetch_array($result))
{
echo '<option value=$row[\'Roll#\'].\'i-\'.$row[\'Batch\']>$row[\'Roll#\'].\'i-\'.$row[\'Batch\']</option>';
}
}?>
</select>
</div>
I am using JQuery to hide like this:
$(document).ready(function()
{
$('#grpstd').hide();
$('#groupstd').hide();
});
try doing this after the dom is ready as using this:
$(document).ready(function() {
$('#grpstd, #groupstd').hide();//using two elements using one statement
});
When are you trying to hide the divs? You will need to wait until at least the document is ready:
$(document).ready(function() {
$('#grpstd').hide();
$('#groupstd').hide();
});
Did you try this?
$(document).ready(function() {
$('#grpstd, #groupstd').hide();
});
or
$(function() {
$('#grpstd, #groupstd').hide();
});
I am using a selectbox to display the list of "enterpirses" from the database. But the onchange event is not triggering. But when i manually once put the value of querystring then it starts working. I dont understand why it is happening.
I am new to javascript and php, kindly suggest me the solution to this.
<select id="enterprisebox" onchange="javascript:valueselect()" >
<option value="-">-</option>
<?php foreach($enterprise as $val) { ?>
<option value="<?php echo $val['customer_id'];?>"><?php echo $val['customer_name']?>
</option>
<? } ?>
</select>
and my javascript is--
function valueselect()
{
var i = document.getElementById('enterprisebox');
var p = i.options[i.selectedIndex].value;
//alert(p);
window.location.href = "channelinformation.html?selected="+p;
}
onchange="javascript:valueselect()" replace with onchange="valueselect(this.value);"
function valueselect(myval)
{
window.location.href = "channelinformation.html?selected="+myaval;
}
You Can Use Directly
onchange="window.location='channelinformation.html?selected='+myaval"
Make life easier and use jQuery:
$(document).ready(function () {
$('#enterprisebox').change(function () {
window.location.href = "channelinformation.html?selected="+ $(this).val();
});
});
Try this,
<select id="enterprisebox" onchange="javascript:valueselect(this)" >
<option value="-">-</option>
<?php foreach($enterprise as $val) { ?>
<option value="<?php echo $val['customer_id'];?>"><?php echo $val['customer_name']?>
</option>
<? } ?>
</select>
<script>
function valueselect(sel) {
var value = sel.options[sel.selectedIndex].value;
window.location.href = "channelinformation.html?selected="+value;
}
</script>