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

Question

我如何在依赖下拉列表中的特定选择上添加输入字段当用户在下拉列表中选择其他选项时，我想显示输入字段。就像有人想要添加列表中未包含的其他内容时，他可以手动添加。列表太大了，我只显示前三个类别

这是我的代码：

    @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')

Answer 1

我认为您应该在document.getElementById("theselectid").selected = true;或其他内容中放置document.getElementById("theidofinput").disabled = false;document.getElementById("theidofinput").style.opacity = 1.0;或表明已被检查的内容。