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

Question

我如何在依赖下拉列表中的特定 selection 添加输入字段当用户 select 下拉列表中的其他选项时，我想显示输入字段。就像当有人想添加更多不在列表中的东西时，他可以手动添加。列表会太大我只显示前三个类别

这是我的代码：

    @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; 或其他表明它已被检查的内容，然后：在 if 中，document.getElementById("theidofinput").disabled = false;document.getElementById("theidofinput").style.opacity = 1.0; 或其他内容。

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

How i can add input field on specific selection in depended drop down

html

options

selection

laravel

dropdown