Question

我使用product，make和models创建了一个动态下拉列表。创建下拉列表选择时，如果选择值具有相同名称，如何区分它们。尽管选择了不同的产品，但我当前的脚本返回相同的值。此外，如何将选择ID值和下拉列表值居中。任何提供的帮助表示赞赏。

    <select id="company" name="company" class="form-control linked- 
   dropdown" data-linked="make">
  <option value="">-- Select Product --</option>
  <option value="Product1">Product1</option>
  <option value="Product2">Product2</option>
  </select>
  </div>
  </div>
  <select id="make" name="make" class="form-control linked-
         dropdown" data-linked="model">
    <option value="">Choose Make</option>    
    </select>
   </div>
  </div>
    <select id="model" name="model" class="form-control">
    <option value="">Choose Model</option>
    </select>
   </div>
   </div>
   </form>

   <script>
   var dataFirstSelect = {
   option: ['Product1', 'Product2', 'Product3']
    }
   var dataSecondSelect = {
   Product1: ['Model 1', 'Model 2', 'Model_3', 'Model_4'],
   Product2: ['Model 1', 'Model 2', 'Model_7', 'Model_8']
   }
   var dataThirdSelect = {
   'Model 1': ['Make1-1-1', 'Make1-1-2', 'Make1-1-3', 'Make1-1-4'],
   'Model 2': ['Make1-1-1', 'Make1-1-2', 'Make1-2-3', 'Make1-2-4'],
   'Model_3': ['Make1-3-1', 'Make1-3-2', 'Make1-3-3', 'Make1-3-4'],
    }

    $('#company').on('change', function() {
    var a = $(this).val();
     if (a !== '') {
    for (var i = 0; i < dataSecondSelect[a].length; i++) {
     $('#make').append($("<option></option>")
    .attr("value", dataSecondSelect[a][i])
    .text(dataSecondSelect[a][i]));
       }
       }
       });
     $('#make').on('change', function() {
     var b = $(this).val();
     if (b !== '') {
     for (var i = 0; i < dataThirdSelect[b].length; i++) {
     $('#model').append($("<option></option>")
    .attr("value", dataThirdSelect[b][i])
    .text(dataThirdSelect[b][i]));
    }
    }
    });

    function openDoc(url) {
    window.open         
    (url, "_blank", "menubar=yes,location=yes,resizable=yes,scrollbars= 
     yes, status = yes ");
     }
    $('#clickButton').on('click', function() {
    var data = new Object;
    $('select').each(function() {
    //console.log($(this));
     data[$(this)["0"].id] = $(this).val();
    });
    openDoc(data.model);
    });
    </script>

Answer 1

您的基本问题是您没有清除选择更改的先前选项。每次用户更改选择时，选项的数量会变长，因此您不知道什么是什么。下面的代码解决了这个问题。请注意我在事件处理程序中的更改。

        <!DOCTYPE html>
        <html>
        <head>
            <title></title>
            <meta charset="utf-8" />
            <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
            <script>
                var dataFirstSelect = {
                    option: ['Product1', 'Product2', 'Product3']
                }
                var dataSecondSelect = {
                    Product1: ['Model 1', 'Model 2', 'Model_3'],
                    Product2: ['Model 1', 'Model 2', 'Model_7', 'Model_8']
                }
                var dataThirdSelect = {
                    'Model 1': ['Make1-1-1', 'Make1-1-2', 'Make1-1-3', 'Make1-1-4'],
                    'Model 2': ['Make1-1-1', 'Make1-1-2', 'Make1-2-3', 'Make1-2-4'],
                    'Model_3': ['Make1-3-1', 'Make1-3-2', 'Make1-3-3', 'Make1-3-4'],
                }

                $(document).ready(function(){

                    $('#company').on('change', function () {

                        $('#model').html("<option value=''>Waiting on Make</option>")
                        var a = $(this).val();

                        if (a !== '') {
                            $('#make').html("<option value=''>Select Make</option>");
                            for (var i = 0; i < dataSecondSelect[a].length; i++) {
                                $('#make').append($("<option></option>")
                               .attr("value", dataSecondSelect[a][i])
                               .text(dataSecondSelect[a][i]));
                            }
                        } else {
                            $('#make').html("<option value=''>Waiting on Comapny</option>");
                        }
                    });
                    $('#make').on('change', function() {
                        var b = $(this).val();
                        if (b !== '') {
                            $('#model').html("<option value=''>Select Model</option>")
                            for (var i = 0; i < dataThirdSelect[b].length; i++) {
                                $('#model').append($("<option></option>")
                               .attr("value", dataThirdSelect[b][i])
                               .text(dataThirdSelect[b][i]));
                            }
                        } else {
                            $('#model').html("<option value=''>Waiting on Make</option>")
                        }
                    });

                    $('#clickButton').on('click', function () {

                        var data = new Object;
                        $('select').each(function () {
                            //console.log($(this));
                            data[$(this)["0"].id] = $(this).val();
                        });
                        alert(data.model);
                    });
                });

                function openDoc(url) {
                    window.open         
                    (url, "_blank", "menubar=yes,location=yes,resizable=yes,scrollbars=yes, status = yes ");
                }


            </script>
        </head>
        <body>
            <div>
            <select id="company" name="company" class="form-control linked-
           dropdown" data-linked="make">
                <option value="">-- Select Product --</option>
                <option value="Product1">Product1</option>
                <option value="Product2">Product2</option>
            </select>
            </div>
            <div>
            <select id="make" name="make" class="form-control linked-
                 dropdown" data-linked="model">
                <option value="">Waiting on Company</option>
            </select>
            </div>
            <div>
            <select id="model" name="model" class="form-control">
                <option value="">Waiting on Make</option>
            </select>
            </div>

            <button type="button" id="clickButton">button</button>
        </body>
        </html>

区分下拉列表中的选择值

1 个答案: