Javascript 如何将父id吸引到隐藏的输入codeigniter/ajax

我在表格上有一个选择下拉列表，其中列出了我数据库中的类别

问题：当我从选择表单中选择一个类别时，如果它有父id 如何将该父id吸引到表单上的隐藏输入值中

控制器

<?php

class Pages extends Admin_Controller {

    public function index() {
        $this->load->model('admin/catalog/model_catalog_pages');

        $data['page_categories'] = array();

        $results = $this->model_catalog_pages->get_category();

        foreach ($results as $result) {

            if ($result['parent_id']) {

                // If Child Category

                $data['page_categories'][] = array(
                    'category_id' => $result['category_id'],
                    'parent_id' => $result['parent_id'],
                    'name' => $this->model_catalog_pages->get_parent_name($result['parent_id']) .' &gt; '. $result['name']
                );

            } else {

                // If Parent Category

                $data['page_categories'][] = array(
                    'category_id' => $result['category_id'],
                    'parent_id' => $result['parent_id'],
                    'name' => $result['name']
                );
            }
        }       

        $this->load->view('template/catalog/page_form_view', $data);
    }
}

?>

查看

<form action="" method="post" enctype="multipart/form-data" id="form-page" class="form-horizontal">

<div class="form-group">
<label class="col-sm-2 control-label" >Categories</label>
<div class="col-sm-10">
<select class="form-control" name="category_select" id="category_select">
    <?php foreach ($page_categories as $category) {?>
        <option value="<?php echo $category['category_id'];?>"><?php echo $category['name'];?></option>
    <?php }?>
</select>
<input type="hidden" id="category_parent_id" name="category_parent_id" value="" />
</div>
</div>

</form>

类别

我解决这个问题的方法是在下拉菜单选项中添加一个数据属性，然后使用一些javascript来检测它是否存在。试试这个：

<select class="form-control" name="category_select" id="category_select">
    <?php foreach ($page_categories as $category) {?>
        <option value="<?php echo $category['category_id'];?>" <?php echo isset($category['parent_id']?'data-parent_id="'.$category['parent_id]'"':'';?>><?php echo $category['name'];?></option>
    <?php }?>
</select>
<input type="hidden" id="category_parent_id" name="category_parent_id" value="" />

这是一个javscript的小提琴，我在提琴中使用了type='text'输入字段来演示它的工作原理，但这段代码仍然可以使用type='hidden'

---

编辑：我已经调整了javascript，这样当页面加载时，它应该默认选择下拉菜单中的任何内容。这避免了添加虚拟“请选择”选项的需要。（此处提供旧JS代码：）。

感谢@Ben Broadley现在正在工作

通过他的方式，我添加了数据parentid和回显parendid，所以现在看起来像这样

data parentid=“

并添加了他的脚本

<?php

class Pages extends Admin_Controller {

    public function index() {
        $this->load->model('admin/catalog/model_catalog_pages');

        $data['page_categories'] = array();

        $results = $this->model_catalog_pages->get_category();

        foreach ($results as $result) {

            if ($result['parent_id']) {

                // If Child Category

                $data['page_categories'][] = array(
                    'category_id' => $result['category_id'],
                    'parent_id' => $result['parent_id'],
                    'name' => $this->model_catalog_pages->get_parent_name($result['parent_id']) .' &gt; '. $result['name']
                );

            } else {

                // If Parent Category

                $data['page_categories'][] = array(
                    'category_id' => $result['category_id'],
                    'parent_id' => $result['parent_id'],
                    'name' => $result['name']
                );
            }
        }       

        $this->load->view('template/catalog/page_form_view', $data);
    }
}

?>

看法

类别
var dd=document.getElementById（'category_select'）；
var hidden=document.getElementById（'category_parent_id'）；
dd.addEventListener（“变更”，功能（e）{
用于（dd.options中的var i）{
if（dd.options[i]。selected==true）{
if（dd.options[i].dataset.parentid）{
hidden.value=dd.options[i].dataset.parentid
}否则{
hidden.value=“”；
}
}
}
},0);

<?php

class Pages extends Admin_Controller {

    public function index() {
        $this->load->model('admin/catalog/model_catalog_pages');

        $data['page_categories'] = array();

        $results = $this->model_catalog_pages->get_category();

        foreach ($results as $result) {

            if ($result['parent_id']) {

                // If Child Category

                $data['page_categories'][] = array(
                    'category_id' => $result['category_id'],
                    'parent_id' => $result['parent_id'],
                    'name' => $this->model_catalog_pages->get_parent_name($result['parent_id']) .' &gt; '. $result['name']
                );

            } else {

                // If Parent Category

                $data['page_categories'][] = array(
                    'category_id' => $result['category_id'],
                    'parent_id' => $result['parent_id'],
                    'name' => $result['name']
                );
            }
        }       

        $this->load->view('template/catalog/page_form_view', $data);
    }
}

?>

<form action="" method="post" enctype="multipart/form-data" id="form-page" class="form-horizontal">

<div class="form-group">
<label class="col-sm-2 control-label" >Categories</label>
<div class="col-sm-10">
<select class="form-control" name="category_select" id="category_select">
    <?php foreach ($page_categories as $category) {?>
        <option value="<?php echo $category['category_id'];?>" data-parentid="<?php echo $category['parent_id'];?>"><?php echo $category['name'];?></option>
    <?php }?>
</select>
<input type="hidden" id="category_parent_id" name="category_parent_id" value="" />
</div>
</div>

</form>
<script type="text/javascript">
var dd = document.getElementById('category_select');
var hidden = document.getElementById('category_parent_id');
dd.addEventListener('change',function(e){
    for(var i in dd.options){
        if(dd.options[i].selected == true){
            if(dd.options[i].dataset.parentid){
                hidden.value = dd.options[i].dataset.parentid
            }else{
                hidden.value = "";
            }
        }
    }

},0);
</script>