[英]populating a second select box after selecting a first select box value ,how could select the value for edit in the script
html
<div class="form-group">
<label for="" class="control-label col-xs-2">
<?php echo $this->lang->line('country'); ?>
</label>
<div class="col-md-6">
<select class="form-control" id="edu" name="country">
<option value="">Select</option>
<option value='United Kingdom' <?php echo set_value( 'country', $row->Country) == 'United Kingdom' ? "selected" : "";?>>United Kingdom</option>
<option value='Canada' <?php echo set_value( 'country', $row->Country) == 'Canada' ? "selected" : "";?>>Canada</option>
<option value='Others' <?php echo set_value( 'country', $row->Country) == 'Others' ? "selected" : "";?>>Others</option>
</select>
</div>
</div>
<div class="form-group">
<label for="" class="control-label col-xs-2">
<?php echo $this->lang->line('location'); ?>
</label>
<div class="col-md-6">
<select class="form-control" id="edct" name="location">
<option value="">Select</option>
<script>
var eduBak = {};
eduBak['United Kingdom'] = ['England', 'Northrn Ireland', 'Scotland', 'Wales', 'other'];
eduBak['Canada'] = ['Alberta ', 'Brirish Columbia', 'Manitoba', 'others'];
eduBak['Others'] = ['Others']
$('#edu').on('change', function() {
var edu = document.getElementById("edu");
var model = document.getElementById("edct");
var educ = edu.value;
while (model.options.length) {
model.remove(0);
}
var ed = eduBak[educ];
if (ed) {
var i;
for (i = 0; i < ed.length; i++) {
var e = new Option(ed[i], ed[i]);
model.options.add(e);
}
}
});
</script>
</select>
</div>
</div>
我试图从数据库中获取第二个选择框的值,以继续进行编辑/更新部分。对于通常的选择框,我一直在使用以下方法。
<select>
<option value="">Select</option>
<option value='Somewhere' <?php echo set_value( 'country', $row->Country) == 'Somewhere' ? "selected" : "";?>>Somewhere</option>
</select>
现在,我需要从数据库中获取第二个选择框。 。 我不知道将其添加到脚本代码中。任何人都可以帮助我解决此问题。 。 ?
<div class="form-group">
<label for="" class="control-label col-xs-2">
<?php echo $this->lang->line('country'); ?>
</label>
<div class="col-md-6">
<select class="form-control" id="edu" name="country">
<option value="">Select</option>
<option value='United Kingdom' <?php echo set_value( 'country', $row->Country) == 'United Kingdom' ? "selected" : "";?>>United Kingdom</option>
<option value='Canada' <?php echo set_value( 'country', $row->Country) == 'Canada' ? "selected" : "";?>>Canada</option>
<option value='Others' <?php echo set_value( 'country', $row->Country) == 'Others' ? "selected" : "";?>>Others</option>
</select>
</div>
</div>
<div class="form-group">
<label for="" class="control-label col-xs-2">
<?php echo $this->lang->line('location'); ?>
</label>
<div class="col-md-6">
<select class="form-control" id="edct" name="location">
<option value="">-select-</option>;
<?php if(isset($row))
{?>
<option value="<?php echo $row->Location;?>" selected><?php echo $row->Location;?></option>
<?php }?>
</select>
<script>
var eduBak = {};
eduBak['United Kingdom'] = ['England', 'Northrn Ireland', 'Scotland', 'Wales', 'other'];
eduBak['Canada'] = ['Alberta ', 'Brirish Columbia', 'Manitoba', 'others'];
eduBak['Others'] = ['Others']
$('#edu').on('change', function() {
$("#edct > option").remove();
var edu = document.getElementById("edu");
var model = document.getElementById("edct");
var educ = edu.value;
while (model.options.length) {
model.remove(0);
}
var ed = eduBak[educ];
if (ed) {
var i;
for (i = 0; i < ed.length; i++) {
var e = new Option(ed[i], ed[i]);
model.options.add(e);
}
}
});
</script>
</div>
</div>
这种方法对我有用。
使用jQuery Ajax获取第二个选择框的选项,并进行第二个选择并将其插入当前选择框之后。
这样的事情。
$("select").on("change", function() {
var select = $(this);
jQuery.ajax({
dataType: "json",
url: "/get-second-select-values",
data : {
selected : select.val()
}
}).done(function (values) {
var second_select = "<select>";
$.each( values, function( key, value ) {
second_select+= "<option value='" +key+ "'>" +value+ "</option>"
});
second_select += "</select>";
select.after(second_select)
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.