PDA

View Full Version : dropdown lists


cocoonfx
08-06-2013, 04:38 PM
Hi

I am banging my head, I have two drop down list hours and minutes.

The hours start at 08 and the hours are 00,15.30,45.

I want it so that if 8 is selected only 45 is available in the minutes drop down.

If they select 09 then they can select any time. I just can't see the wood through the trees. I am mobile so I can provide code at the second.

Any advise would be appreciated

domedia
08-06-2013, 09:55 PM
I don't usually do things like these, but I would imagine you write a function in JS that gets fired off when you select '8'

cocoonfx
08-06-2013, 10:04 PM
Hummm I have inherited someone elses code and its a mess code is spread all over the place.

I have tried all kinds of different functions but it just will not work.

I have cleaned some code the jquery.

I can't get it to work

$( "#startdate" ).datepicker({

buttonImageOnly: true,
buttonImage: './steps/images/cal.png',
changeMonth: true,
changeYear: true,
minDate:0,
maxDate: 365,
dateFormat: 'dd/mm/yy'
});

$( "#enddate" ).datepicker({

buttonImageOnly: true,
buttonImage: './steps/images/cal.png',
changeMonth: true,
changeYear: true,
minDate: 1,
maxDate: 365,
dateFormat: 'dd/mm/yy'
});
*$("#starttimehr").change(function() {*
if($(this).data('options') == undefined){
* * /*Taking an array of all options-2 and kind of embedding it on the select1*/
* * $(this).data('options',$('#starttimemin option').clone());
* * }*
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#starttimemin').html(options);
});
</script>

<label>Rental Start Date/Time </label>
<input type="text" name="startdate" id="startdate" readonly="readonly" onChange="calcDays()"><div id='step1_startdate_errorloc' class="error_strings"></div>
<select class="date" name="starttimehr" id="starttimehr">
<option value="08" selected="selected">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>
<select class="date" name="starttimemin" id="starttimemin">
<option value="00">00</option>
<option value="15">15</option>
<option value="30" selected="selected">30</option>
<option value="45">45</option>
</select>


<script language="JavaScript" type="text/javascript"
xml:space="preserve">//<![CDATA[
//You should create the validator only after the definition of the HTML form
var frmvalidator = new Validator("step1");
frmvalidator.EnableOnPageErrorDisplay();
frmvalidator.EnableMsgsTogether();
* frmvalidator.addValidation("Catagory_of_Vehicle","dontselect=XXX","*");
frmvalidator.addValidation("pickup","dontselect=XXX","*");
frmvalidator.addValidation("dropoff","dontselect=XXX","*");
frmvalidator.addValidation("startdate","req","*");
frmvalidator.addValidation("enddate","req","*");
//]]></script>

edbr
08-07-2013, 12:47 AM
hm i was thinking arrays some how . have alook at this as it might be adaptable to what you want/. http://blog.chapagain.com.np/using-jquery-ajax-populate-selection-list/

edbr
08-07-2013, 03:25 AM
that was fun, had to try his code. needs tweaking , adding the date picker etc,but works as is using the call to data.php
index .php
<!-- <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> -->

<script type="text/javascript" src="../jquery.js"></script>

<script type="text/javascript">
jQuery(document).ready(function(){
// when any option from country list is selected
jQuery("select[name='country']").change(function(){

// path of ajax-loader gif image
var ajaxLoader = "<img src='../ajax-loader.gif' alt='loading...' />";

// get the selected option value of country
var optionValue = jQuery("select[name='country']").val();

/**
* pass country value through GET method as query string
* the 'status' parameter is only a dummy parameter (just to show how multiple parameters can be passed)
* if we get response from data.php, then only the cityAjax div is displayed
* otherwise the cityAjax div remains hidden
*/
jQuery("#cityAjax")
.html(ajaxLoader)
.load('data.php', "country="+optionValue+"&status=1", function(response){
if(response) {
jQuery("#cityAjax").css('display', '');
} else {
jQuery("#cityAjax").css('display', 'none');
}
});
});
});
</script>

<?php

?>

Countries:
<select name="country">
<option value="">Please Select</option>
<option value="1">8</option>
<option value="2">9</option>
<option value="3">10</option>
<option value="4">11</option>
<option value="5">12</option>
</select>

<div id="cityAjax" style="display:none">
<select name="city">
<option value="">Please Select</option>
</select>
</div>

data.php
<?php
$country = $_GET['country'];

if(!$country) {
return false;
}

$cities = array(
1 => array('00','45'),
2 => array('00','15','30','45'),
3 => array('00','15','30','45'),
4 => array('00','15','30','45'),
5 => array('00','15','30','45')
);

$currentCities = $cities[$country];
?>

City:
<select name="city">
<option value="">Please Select</option>
<?php
foreach($currentCities as $city) {
?>
<option value="<?php echo $city; ?>"><?php echo $city; ?></option>
<?php
}
?>
</select>

as you see i repeated the array for speedy testing

cocoonfx
08-07-2013, 09:29 AM
hi Edbr thanks for that, I can get it working outside of the site I am working but for some reason it will not work within the site.



http://test-cocoonfxmedia.co.uk/test.php <-- works perfectly
http://test-cocoonfxmedia.co.uk/m/steps/test.php <--- works perfectly

But in the actual file of the site the data.php does get called in for some reason. Something within the code is blocking it from working

edbr
08-08-2013, 02:15 AM
stating the obvious im certain but could it be a jquery link problem?

cocoonfx
08-08-2013, 12:49 PM
Yeah tried that... found a java solution which works a dream... thanks for your help Edr...


<script type="text/javascript" language="JavaScript">
function Resetvalues(ddid, fdd)
{


var select2 = document.getElementById(ddid);

for(i=select2.options.length-1;i>=0;i--)
{
select2.remove(i);
}


var strDay = fdd.options[fdd.selectedIndex].value;
if (strDay==8 )
{
var opt = document.createElement("option");
opt.text = "30";
opt.value = 30;
select2.options.add(opt);

var opt2 = document.createElement("option");
opt2.text = "40";
opt2.value = 40;
select2.options.add(opt2);
}
else{

var opt5 = document.createElement("option");
opt5.text = "00";
opt5.value = 00;
select2.options.add(opt5);

var opt6 = document.createElement("option");
opt6.text = "15";
opt6.value = 15;
select2.options.add(opt6);

var opt3 = document.createElement("option");
opt3.text = "30";
opt3.value = 30;
select2.options.add(opt3);


var opt4 = document.createElement("option");
opt4.text = "40";
opt4.value = 40;
select2.options.add(opt4);


}



}
</script>
</head>

<body>
<div class="clear"></div>
<label>Rental Start Date/Time </label>
<input type="text" name="startdate" id="startdate" readonly="readonly" onChange="calcDays()"><div id='step1_startdate_errorloc' class="error_strings"></div>
<select class="date" onChange="Resetvalues('date_dd', this);" name="starttimehr" id="starttimehr">
<option value="08" selected="selected">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>
<select id="date_dd" class="date" name="starttimemin">

<option value="30" selected="selected">30</option>
<option value="40">40</option>
</select>

<div class="clear"></div>

<label>Rental End Date/Time </label>
<input type="text" name="enddate" id="enddate" readonly="readonly" onChange="calcDays()"><div id='step1_enddate_errorloc' class="error_strings"></div>
<select class="date" name="endtimehr" id="endtimehr">
<option value="08" selected="selected">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>
<select class="date" name="endtimemin" id="endtimemin">
<option value="00">00</option>
<option value="15">15</option>
<option value="30" selected="selected">30</option>
<option value="45">45</option>
</select>

edbr
08-08-2013, 11:40 PM
Thats nice. Snippet for keeping. I like direct javascript in cases like this.