在选择第一个选择框值后填充第二个选择框,如何在脚本中选择要编辑的值
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)
});
});
相关文章:
- javascript动态内容与选择长运行脚本
- 使用Ajax或JavaScript选择下拉列表选项后,在同一页面上执行PHP脚本
- 在java脚本中选择的随机日期上添加一年
- Javascript:更改<选择>java脚本中的选项
- jQuery选择器在脚本中不起作用,但在控制台中工作
- 脚本选择所有输入,而不仅仅是复选框
- 查看由 java 脚本文件上传器选择的文件的文件内容
- 当通过选择页面上所有复选框的 jQuery 脚本选中复选框时,如何触发自定义 javascript 事件
- 选择下拉列表需要在选中时显示提供商的详细信息-无法通过我的脚本显示url
- 当我点击一个按钮时随机选择一个声音来重现的脚本
- 如何向登录用户隐藏选择加入脚本
- 选择<脚本></脚本>作为html正文中的纯文本
- 在广告词脚本中添加活动选择器
- 您可以根据屏幕大小选择包含和脚本吗
- 选择&提交图像Form/java脚本
- OR 运算符多项选择脚本
- 页面选择脚本不起作用
- 如果一个页面或网站已经有一个版本的Jquery chrome扩展失败.我想Jquery选择脚本
- 当视图从操作结果返回时,选择2脚本不正确渲染
- 是否可以在所有exept输入标记上使用禁用文本选择脚本