在选择第一个选择框值后填充第二个选择框,如何在脚本中选择要编辑的值

populating a second select box after selecting a first select box value ,how could select the value for edit in the script

本文关键字:选择 脚本 编辑 第二个 第一个 填充      更新时间:2023-09-26

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)
        });
});