我想在codeigniter中创建多个下拉列表,在我的情况下,当用户选择国家/地区时,下一个列表应提供该国家/地区的州选项,而在用户选择州/省之后,下一部分应提供城镇选项等。希望使用某些脚本提供列表或选项,并且当用户最终完成选择时,应在数据库中更新列表。是否可以通过使用脚本而不是从数据库中加载选项来提供选项列表。这是我要在其上实现动态下拉列表的视图和模型文件
form_model.php
function r_ins()
{
$session_user=$this->session->userdata('logged_in');
$sysdat = date("Y-m-j H:i:s");
$data= array(
'id' => $this->input->post('id'),
'name' => $this->input->post('name'),
'country' => $this->input->post('country'),
'state' => $this->input->post('state'),
'town' => $this->input->post('town'),
'village' => $this->input->post('village'),
'c_name' => $session_user['username'],
'c_date' => $sysdat
);
$this->db->insert('r_info',$data);
return $this->input->post('id');
//echo "<pre>";
// print_r($_POST);
}
view.php
<label> ID:<span id="r_id" style="font-size:12px;float:right;"></span></label>
<input type="text" name="id" id="r_id" placeholder="ID" required/>
<label >Name:</label>
<input type="text" name="name" placeholder="Name" required/>
<label >Country:</label>
<select name="country" >
<option>Select Country</option>
<option value="USA">USA</option>
<option value="AUS">Austrailia</option>
<option value="Jap">Japan</option>
<option value="Korea">Korea</option>
</select><br/><br/>
<label >State:</label>
<input type="text" name="state" placeholder="State" required/>
<label >City:</label>
<input type="text" name="city" placeholder="City" required/>
<label >Town:</label>
<input type="text" name="town" placeholder="Town" required/>
<input type="submit" value="Save" id="re_submit" class="button"><br/>
</form>
<script type="text/javascript">
function getXMLHTTP() { //function to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getDoc(strURL) {
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('my_div').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
这就是魔术发生的地方。在我的第一个下拉菜单中,我放置了一个onChange属性。这将调用我的getDoc javascript函数,该函数具有PHP FUNCTION作为参数。
<select name="docSpec" id="docSpec" onChange="getDoc('getSpec.php?spec='+this.value)">
<option>pick a specialization</option>
<option value="General">General</option>
<option value="pediatrics">pediatrics</option>
<option value="Physician">Physician</option>
<option value="Cardiologist">Cardiologist</option>
<option value="Pulmonary">Pulmonary</option>
</select>
<div id="my_div" style="display:inline;">
<!--content from getSpec.php goes here--->
</div>
现在,您需要HTML中的DIV,该DIV可以从另一个页面获取数据,然后以DOM形式将其返回到当前页面中。这样,您的原始页面不会刷新,但仍会从服务器获取数据。
getSpec.php以显示在php表下会发生什么
require_once('dbcon.php');
$query="select doctorName from doctors where specialty= '$spec'";
$result=mysqli_query($conn,$query);
?>
<select name="docName">
<?php
while( $row = mysqli_fetch_row($result)) {
echo "<option type='hidden' value='$row[0]'>$row[0]</option>";
} ?>
</select>
我希望这段代码对您有所帮助。您可以根据自己的需要进行调整。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句