javascript - 使用 Bootstrap Dropdown 和 Jquery 更改 Bootstrap 表单-6ren

javascript - 使用 Bootstrap Dropdown 和 Jquery 更改 Bootstrap 表单

转载作者：行者123 更新时间：2023-11-30 19:57:41

我想使用下拉菜单和 jquery 更改要显示的表单，但似乎不起作用。我确实尝试了一个简单的代码，只使用了几个 div 和一个段落，它起作用了，或者我认为是这样，因为当我把我的表单放进去时它不再起作用了。顺便说一句，这是我的代码:

//this is the form

<div class="container">
    <h3>Choose the brand you want to input</h3> <br>
    <select id="brand-combox" class="custom-select col-sm-2" name="brand-combox">
        <option selected value="#">Select a Brand</option>
        <option value="qnap">Qnap</option>
        <option value="asustor">Asustor</option>
        <option value="nutanix">Nutanix</option>
        <option value="dji">DJI</option>
        <option value="wps">WPS Office</option>
    </select>
</div>

<br>

<div class="container container-input" id="qnap-form" style="display: none;">
    <form>
      <div class="row">
        <div class="form-group col-md-6">
          <input type="text" name="product_name" class="form-control" placeholder="Product Name">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="cpu" class="form-control" placeholder="CPU Type">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="memory" class="form-control" placeholder="Product Memory">
        </div>
      </div>

      <div class="row">
        <div class="form-group col-md-3">
          <input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
        </div>
      </div>

      <div class="row">
        <div class="form-group col-md-2">
          <input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="psu" class="form-control" placeholder="Power Supply">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
        </div>
      </div>

      <div class="row">
        <div class="form-group col-md-3">
          <input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="lan" class="form-control" placeholder="LAN">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
        </div>
      </div>

      <div class="row">
        <div class="form-group col-md-2">
          <input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
        </div>

        <div class="form-group col-md-3">
          <?php
            //read product segment
            $stmt = $segment->read();

            //put them in select dropdown
            echo "<select class='custom-select col-sm-12' name='segment_id'>";
            echo "<option selected>Select Segment...</option>";

              while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
                extract($row_segment);
                echo "<option value={$segment_id}>{$segment}</option>";
              }
            echo "</select>";
          ?>
        </div>
      </div>

      <div class="row">
        <div class="form-group col-md-8">
          <textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
        </div>

        <div class="form-group col-md-3">
          <label for="photo">Choose Image</label>
          <input type="file" name="image" class="form-control-file">
        </div>
      </div>

      <br>

      <div class="row">
        <div class="form-group col-md-3">
          <button type="submit" class="btn btn-success">Create</button>
        </div>
      </div>
    </form>
 </div>

<div class="container container-input" id="asustor-form" style="display: none;">
    <form>
      <div class="row">
        <div class="form-group col-md-6">
          <input type="text" name="product_name" class="form-control" placeholder="Product Name">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="cpu" class="form-control" placeholder="CPU Type">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="memory" class="form-control" placeholder="Product Memory">
        </div>
      </div>

      <div class="row">
        <div class="form-group col-md-3">
          <input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
        </div>
      </div>

      <div class="row">
        <div class="form-group col-md-2">
          <input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="psu" class="form-control" placeholder="Power Supply">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
        </div>
      </div>

      <div class="row">
        <div class="form-group col-md-3">
          <input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="lan" class="form-control" placeholder="LAN">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
        </div>
      </div>

      <div class="row">
        <div class="form-group col-md-2">
          <input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
        </div>

        <div class="form-group col-md-3">
          <?php
            //read product segment
            $stmt = $segment->read();

            //put them in select dropdown
            echo "<select class='custom-select col-sm-12' name='segment_id'>";
            echo "<option selected>Select Segment...</option>";

              while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
                extract($row_segment);
                echo "<option value={$segment_id}>{$segment}</option>";
              }
            echo "</select>";
          ?>
        </div>
      </div>

      <div class="row">
        <div class="form-group col-md-8">
          <textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
        </div>

        <div class="form-group col-md-3">
          <label for="photo">Choose Image</label>
          <input type="file" name="image" class="form-control-file">
        </div>
      </div>

      <br>

      <div class="row">
        <div class="form-group col-md-3">
          <button type="submit" class="btn btn-success">Create</button>
        </div>
      </div>
    </form>
 </div>

这是 jquery:

$('#brand-combox').on('change', function(){
                if (this.value == 'qnap') {
                    $('#qnap-form').show();
                    $('#asustor-form').hide();
                }
                else if(this.value == 'asustor'{
                    $('#qnap-form').hide();
                    $('#asustor-form').show();
                }
            });

我也尝试过任何不同的方法，但我还不能找出我遗漏了什么。你愿意帮助我吗？

最佳答案

你的 else if 条件不符合 ) 并添加 jquery，检查它

$('#brand-combox').on('change', function(){
                if (this.value == 'qnap') {
                    $('#qnap-form').show();
                    $('#asustor-form').hide();
                }
                else if(this.value == 'asustor'){
                    $('#qnap-form').hide();
                    $('#asustor-form').show();
                }
            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
    <h3>Choose the brand you want to input</h3> <br>
    <select id="brand-combox" class="custom-select col-sm-2" name="brand-combox">
        <option selected value="#">Select a Brand</option>
        <option value="qnap">Qnap</option>
        <option value="asustor">Asustor</option>
        <option value="nutanix">Nutanix</option>
        <option value="dji">DJI</option>
        <option value="wps">WPS Office</option>
    </select>
</div>

<br>

<div class="container container-input" id="qnap-form" style="display: none;">
    <form>
      <div class="row">
        <h2>qnap</h2>
        <div class="form-group col-md-6">
          <input type="text" name="product_name" class="form-control" placeholder="Product Name">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="cpu" class="form-control" placeholder="CPU Type">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="memory" class="form-control" placeholder="Product Memory">
        </div>
      </div>

      <div class="row">
        <div class="form-group col-md-3">
          <input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
        </div>
      </div>

      <div class="row">
        <div class="form-group col-md-2">
          <input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="psu" class="form-control" placeholder="Power Supply">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
        </div>
      </div>

      <div class="row">
        <div class="form-group col-md-3">
          <input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="lan" class="form-control" placeholder="LAN">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
        </div>
      </div>

      <div class="row">
        <div class="form-group col-md-2">
          <input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
        </div>

        <div class="form-group col-md-3">
          <?php
            //read product segment
            $stmt = $segment->read();

            //put them in select dropdown
            echo "<select class='custom-select col-sm-12' name='segment_id'>";
            echo "<option selected>Select Segment...</option>";

              while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
                extract($row_segment);
                echo "<option value={$segment_id}>{$segment}</option>";
              }
            echo "</select>";
          ?>
        </div>
      </div>

      <div class="row">
        <div class="form-group col-md-8">
          <textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
        </div>

        <div class="form-group col-md-3">
          <label for="photo">Choose Image</label>
          <input type="file" name="image" class="form-control-file">
        </div>
      </div>

      <br>

      <div class="row">
        <div class="form-group col-md-3">
          <button type="submit" class="btn btn-success">Create</button>
        </div>
      </div>
    </form>
 </div>

<div class="container container-input" id="asustor-form" style="display: none;">
    <form>
      <div class="row">
        <h2>asustor</h2>
        <div class="form-group col-md-6">
          <input type="text" name="product_name" class="form-control" placeholder="Product Name">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="cpu" class="form-control" placeholder="CPU Type">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="memory" class="form-control" placeholder="Product Memory">
        </div>
      </div>

      <div class="row">
        <div class="form-group col-md-3">
          <input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
        </div>
      </div>

      <div class="row">
        <div class="form-group col-md-2">
          <input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="psu" class="form-control" placeholder="Power Supply">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
        </div>
      </div>

      <div class="row">
        <div class="form-group col-md-3">
          <input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="lan" class="form-control" placeholder="LAN">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
        </div>

        <div class="form-group col-md-2">
          <input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
        </div>
      </div>

      <div class="row">
        <div class="form-group col-md-2">
          <input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
        </div>

        <div class="form-group col-md-3">
          <input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
        </div>

        <div class="form-group col-md-3">
          <?php
            //read product segment
            $stmt = $segment->read();

            //put them in select dropdown
            echo "<select class='custom-select col-sm-12' name='segment_id'>";
            echo "<option selected>Select Segment...</option>";

              while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
                extract($row_segment);
                echo "<option value={$segment_id}>{$segment}</option>";
              }
            echo "</select>";
          ?>
        </div>
      </div>

      <div class="row">
        <div class="form-group col-md-8">
          <textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
        </div>

        <div class="form-group col-md-3">
          <label for="photo">Choose Image</label>
          <input type="file" name="image" class="form-control-file">
        </div>
      </div>

      <br>

      <div class="row">
        <div class="form-group col-md-3">
          <button type="submit" class="btn btn-success">Create</button>
        </div>
      </div>
    </form>
 </div>

关于javascript - 使用 Bootstrap Dropdown 和 Jquery 更改 Bootstrap 表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53760079/

文章推荐： javascript - 附加到父级，显示所有复选框值

文章推荐： c# - MVC PartialView 不刷新数据

文章推荐： JavaScript - Daterangepicker，isInvalidDate 方法仅启用一天

文章推荐： c# - 找不到对象 "dbo.course"，因为它不存在或您没有权限

jquery - 在 Jade 和 Bootstrap 中使用 Dropdowns 给我 $ (".dropdown-toggle")。dropdown 不是函数
我正在尝试让 Bootstrap 下拉菜单与我的 Jade 布局一起使用。但实际上，当我尝试在我的 Jade 文件中执行 $(".dropdown-toggle").dropdown 时出现此错误:
dropdown - 如何在其父组件挂载时拥有语义 UI React Dropdown 自动对焦？
我正在使用 Semantic React UI's Dropdown ，并且我希望它在其父组件安装后立即获得焦点:用户应该能够立即搜索。我尝试在父级的 render() 中使用 ref: (thi
javascript - 根据 Dropdown 的值禁用 DropDown 的两个选项
我有一个脚本如下: var i = 0; function add_relation() { i = i + 1; var key = $('', {
javascript - 第一个 DropDown 选择不会触发第二个 DropDown 函数
我在 MVC 中有 2 个 DropDowns 并尝试使用 AngularJS。我的第一个 DropDown 填充了正确来自数据库的数据。当用户在第一个 DropDown 上进行选择时，第二个 Dro
c# - 根据在另一个 DropDown 上选择的值填充 DropDown/Select
我是一名开发新手，但我偶然发现了一个我无法解决的案例。我将 ASP.NET MVC 与 C# 以及一些 javascript(JQuery、JSON...)结合使用。我要做的是根据在 other 中
twitter-bootstrap - Bootstrap : dropdown vs button dropdown
在 Bootstrap 文档中，似乎有两种不同的方法来创建下拉列表: .dropdown .btn-group first如下: Dropdown ...
android - 使用 DropDown open() 方法打开自定义 DropDown 不起作用
我确实在 kv 文件中定义了一个基本的自定义 DropDown。应用程序 GUI 非常简单，顶部有一个按钮栏，屏幕的其余部分有一个 TextInput。这是代码: dropdowntrialgui.p
css - 如何消除 .dropdown 和 .dropdown-menu 之间的差距
在移动 View 中单击 .dropdown 菜单时，.dropdown 和 .dropdown-menu 之间有一个小空间. 如图所示 Question is it possible to remo
c# - 为什么使用 Jquery 动态生成 DropDown 时只填充第一个 DropDown？
我正在尝试创建一个类似于 DataEntry 网格/表的结构，其中用户在单击按钮时追加新行。该行将包含文本框、下拉菜单、日历控件。所有这些都应该在客户端完成。到目前为止，我已经有了这个，正如你所看到的
html - 无法将 ul Dropdown 转换为 Select DropDown
我有一个带有使用 ul 和 li ( jsfiddle ) 的下拉列表的 jsfiddle。尝试将其转换为选择选项下拉列表时，我没有得到相同的选项 ([jsfiddle]) 2 .我猜这与我重命名某个
javascript - 在项目单击上提交选中的 Atlaskit Dropdown(@atlaskit/dropdown-menu) 菜单复选框
我正在使用@atlaskit/dropdown-menu (https://atlaskit.atlassian.com/packages/core/dropdown-menu)。我想在 Item 点
angular5 - 根据选择另一个 p-dropdown PrimeNG 禁用 p-dropdown
我在我的 angular 应用程序中使用 PrimeNG，我有 p-dropdown 的问题问题我为 country 和 caste_category 有两个下拉菜单，我只为 India 提供 c
asp.net - Formview Dropdown 2 依赖于 Dropdown 1
我有一个表单 View ，在编辑模板中我有两个下拉菜单。下拉 1 明确设置了允许值的列表。它也设置为自动回发。下拉 2 是数据绑定(bind)到 objectdatasource，这个 objec
JavaScript : Dynamic Dropdown for Another Hidden Dropdown and Different Option
我有一个名为 Agency 的下拉菜单，其中包含 2 个选项: 文凭 PPS 如果选择 SPM，则不会出现下拉菜单。但是，如果选择 PPS，则会出现另外 2 个名为 Department 和 Offi
javascript - Angular ngx-select-dropdown : dropdown options not updating
我是 Angular 的新手，所以这可能是一个非常简单的问题。我正在使用 ngx-select-dropdown (下拉控件)。页面上有两个下拉控件，当第一个下拉列表更改时，第二个下拉列表应更新下拉选
javascript - Bootstrap 的 .dropdown ('toggle' ) 效果有点太好了 : dropdown is then unusable
我有一个包含文本区域的下拉菜单。当在文本区域按下返回键时，我希望关闭下拉菜单。这是以下内容的作用: $(document).ready(function(){ $('#edit').keypres
javascript - 在 JQuery 中使用 DropDown 名称获取 DropDown 值
我的页面中有这些SELECT Pending Confirmed Cancelled Refunded Shipped Paid Complete 还有这个 Pending Confirme
jQuery - CSS DropDown Navigation Items - 如何构建 Carrot Dropdown
我有兴趣学习以智能、优雅的方式在整个站点中构建导航项，这些导航项具有胡萝卜，单击后会展开菜单项列表。我希望动态构建菜单项(不一定全部使用 ajax)。但它们不应在页面上进行硬编码。这似乎是像 TW
javascript - 选择 Dropdown coming over bootstrap nav dropdown for hover
我有一个选择下拉菜单，一个是 Bootstrap 导航下拉菜单，而不是单击以打开 Bootstrap 导航下拉菜单我在鼠标悬停时更改了它但是当选择下拉菜单打开并且鼠标悬停在 Bootstrap 导航上
javascript - 如何根据 'Dropdown B' 上选择的选项禁用 'Dropdown A' 的某些选项？
我对此很陌生，所以如果我的问题没有按应有的方式提出，我深表歉意。基本上，我使用 jQuery 的目的是，当从第一个下拉框中选择名为“Apple”的字段时，第二个下拉框将只允许选择“Firm”字段，而

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用 Bootstrap Dropdown 和 Jquery 更改 Bootstrap 表单