Html 如何在依赖下拉列表中的特定选择上添加输入字段

如何在依赖下拉列表中的特定选择上添加输入字段 我想在用户选择下拉列表中的其他选项时显示输入字段。 比如当有人想要添加列表中没有的东西时，他可以手动添加。 列表太大了，我只是显示前三个分类

这是我的密码：

    @extends('layout/header')
@include('layout/sidebar')
<div id="page-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <h1 class="motetreports_heading"></h1>
                {{-- first sequnce --}}
                <form action="/atgard" method="post">
                    @csrf

                        <table width="50%" border="0" cellspacing="0" cellpadding="5">
                          <tr>
                            <td width="41%" align="right" valign="middle">Category1 :</td>
                            <td width="59%" align="left" valign="middle">
                              <select name="category1" id="category1">
                                <option value="">Select Category1</option>
                                <option value="home_ware">Home Ware</option>
                                <option value="education">Education</option>
                                <option value="books">Other</option>
                              </select>
                            </td>
                          </tr>
                          <tr>
                            <td align="right" valign="middle">Category2 :</td>
                            <td align="left" valign="middle">
                              <select disabled="disabled" class="subcat" id="category2" name="category2">
                                <option value>Select Category2</option>
                                <!-- Home Ware -->
                                <optgroup data-rel="home_ware">
                                  <option value="air-conditioners_coolers">Air-Conditioners/Coolers</option>
                                  <option value="audio-video">Audio/Video</option>
                                  <option value="beddings">Beddings</option>
                                  <option value="camera">Camera</option>
                                  <option value="cell-phones">Cell Phones</option>
                                </optgroup>
                                <!-- Education -->
                                <optgroup data-rel="education">
                                  <option value="Colleges">Colleges</option>
                                  <option value="Institutes">Institutes</option>
                                  <option value="Schools">Schools</option>
                                  <option value="Tuitions">Tuitions</option>
                                  <option value="Universities">Universities</option>
                                </optgroup>
                                <!-- Books -->
                                <optgroup data-rel="books">
                                  <option value="College Books">College Books</option>
                                  <option value="Engineering">Engineering</option>
                                  <option value="Magazines">Magazines</option>
                                  <option value="Medicine">Medicine</option>
                                  <option value="References">References</option>
                                </optgroup>
                              </select>
                            </td>
                          </tr>
                          <tr>
                            <td align="right" valign="middle">Category3 :</td>
                            <td align="left" valign="middle">
                              <select disabled="disabled" class="subcat" id="category3" name="category3">
                                <option value>Select Category3</option>
                                <!-- Home Ware -->
                                <optgroup data-rel="home_ware">
                                  <option value="foo1">category3 home ware 1</option>
                                  <option value="foo2">category3 home ware 2</option>
                                </optgroup>
                                <!-- Education -->
                                <optgroup data-rel="education">
                                  <option value="foo3">category3 Education 1</option>
                                  <option value="foo4">category3 Education 2</option>
                                </optgroup>
                                <!-- Books -->
                                <optgroup data-rel="books">
                                  <option value="foo5">category3 Books 1</option>
                                  <option value="foo6">category3 Books 2</option>
                                </optgroup>
                              </select>
                            </td>
                          </tr>
                        </table>


                    <button type="submit" style="width: 100px;" class="btn btn-primary">Skicka</button>
                </form>

                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
                <script type="text/javascript">
         $(function(){

    var $cat = $("#category1"),
        $subcat = $(".subcat");

    var optgroups = {};

    $subcat.each(function(i,v){
        var $e = $(v);
        var _id = $e.attr("id");
            optgroups[_id] = {};
            $e.find("optgroup").each(function(){
        var _r = $(this).data("rel");
        $(this).find("option").addClass("is-dyn");
        optgroups[_id][_r] = $(this).html();
            });
    });
    $subcat.find("optgroup").remove();

    var _lastRel;
    $cat.on("change",function(){
        var _rel = $(this).val();
        if(_lastRel === _rel) return true;
        _lastRel = _rel;
        $subcat.find("option").attr("style","");
        $subcat.val("");
        $subcat.find(".is-dyn").remove();
        if(!_rel) return $subcat.prop("disabled",true);
        $subcat.each(function(){
            var $el = $(this);
          var _id = $el.attr("id");
          $el.append(optgroups[_id][_rel]);
        });
        $subcat.prop("disabled",false);
    });

});
                </script>

            </div>
        </div>
    </div>
    <!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->

@include('layout/footer')

@extends（'layout/header'））
@包括（'布局/侧栏'）
{{--first sequence--}
@csrf
类别1：
选择类别1
家用电器
教育类
其他
类别2：
选择类别2
空调/冷却器
音频/视频
床上用品
摄像机
手机
学院
学院
学校
学费
大学
大学课本
工程类
杂志
药
工具书类
类别3：
选择类别3
类别3家用电器1
类别3家用电器2
类别3教育1
类别3教育2
类别3书籍1
类别3书籍2
斯奇卡
$（函数（）{
变量$cat=$（“#类别1”），
$subcat=$（“.subcat”）；
var optgroups={}；
$subcat.每个（功能（i、v）{
变量$e=$（v）；
var_id=$e.attr（“id”）；
optgroup[_id]={}；
$e.find（“optgroup”）。每个（函数（）{
var _r=$（此）.data（“rel”）；
$（this.find（“option”）.addClass（“is dyn”）；
optgroups[\u id][\u r]=$（this.html（）；
});
});
$subcat.find（“optgroup”）.remove（）；
var_lastRel；
$cat.on（“更改”，函数（）{
var_rel=$（this.val（）；
if（_lastRel==_rel）返回true；
_lastRel=_rel；
$subcat.find（“option”）.attr（“style”和“）；
$subcat.val（“”）；
$subcat.find（“.is dyn”）.remove（）；
如果（！\u rel）返回$subcat.prop（“disabled”，true）；
$subcat.each（函数（）{
var$el=$（本）；
变量id=$el.attr（“id”）；
$el.append（optgroup[\u id][\u rel]）；
});
$subcat.prop（“禁用”，false）；
});
});
@包括（'布局/页脚'）

我认为您应该放置一个

文档。getElementById（“theselected”）。selected=true

或指示已检查的内容，然后：在if内，

document.getElementById（“theidofinput”）.disabled=false；document.getElementById（“theidofinput”）.style.opacity=1.0或什么。
仅供参考，
内的
是无效的，我可以理解！但我需要解决我想做的事情