Question

我实现了一个双下拉列表和我的函数调用代码，在从下拉列表中选择了某些内容之后，该函数没有被调用。

代码应该运行与下拉选择相关的功能。这是在正常的下拉列表中测试的，一切都运行顺利，但由于某种原因不会在这个双下拉列表上运行。

代码正在输出选择，但我希望它能调用该函数。

非常感谢任何帮助。

谢谢！

        <!-- The first select list -->
    <select name="slist1" onchange="SList.getSelect('slist2', this.value);">
     <option>- - -</option>
     <option value="amazon">Amazon</option>
     <option value="apple">Apple</option>
     <option value="keurig">Keurig</option>
     <option value="nike">Nike</option>
    </select>
    <!-- Tags for the seccond dropdown list, and for text-content -->
    <span id="slist2"></span> <div id="scontent"></div>

    <script><!--
    /* Script Double Select Dropdown List, from: coursesweb.net/javascript/ */
    var SList = new Object();             // JS object that stores data for options

    // HERE replace the value with the text you want to be displayed near Select
    var txtsl2 = '';

    /*
     Property with options for the Seccond select list
     The key in this object must be the same with the values of the options added in the first select
     The values in the array associated to each key represent options of the seccond select
    */
    SList.slist2 = {
     "amazon": ['Kindle Fire HD', 'Kindle Charger', 'Kindle Fire HDX'],
     "apple": ['MacBook', 'iMac', 'iPhone', 'iPad'],
     "keurig": ['Platinum', 'Vue'],
     "nike": ['Fuel Band']
    };


    /*
     Property with text-content associated with the options of the 2nd select list
     The key in this object must be the same with the values (options) added in each Array in "slist2" above
     The values of each key represent the content displayed after the user selects an option in 2nd dropdown list
    */

SList.scontent = {
 "Kindle Fire HD": 'kindlefirehd',
 "Kindle Charger": 'kindlecharg',
 "Kindle Fire HDX": 'kindlefirehdx',
 "MacBook": 'macbook',
 "iMac": 'imac',
 "iPhone": 'iphone',
 "iPad": 'ipad',
 "Platinum": 'platinum',
 "Vue": 'vue',
 "FuelBand": 'fuelband'
};





        /* From here no need to modify */

    // function to get the dropdown list, or content
    SList.getSelect = function(slist, option) {
      document.getElementById('scontent').innerHTML = '';           // empty option-content

      if(SList[slist][option]) {
        // if option from the last Select, add text-content, else, set dropdown list
        if(slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
        else if(slist == 'slist2') {
          var addata = '<option>- - -</option>';
          for(var i=0; i<SList[slist][option].length; i++) {
            addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
          }

          document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(\'scontent\', this.value);">'+addata+'</select>';
        }
      }
      else if(slist == 'slist2') {
        // empty the tag for 2nd select list
        document.getElementById('slist2').innerHTML = '';
      }
    }

    var functions = {
        kindlefirehd: function(){window.alert("func1 called")},
        kindlecharge: function(){window.alert("func1 called")},
        kindlefirehdx: function(){window.alert("func1 called")},
        macbook: function(){window.alert("func1 called")},
        imac: function(){window.alert("func1 called")},
        iphone: function(){window.alert("func1 called")},
        ipad: function(){window.alert("func1 called")},
        platinum: function(){window.alert("func1 called")},
        vue: function(){window.alert("func1 called")},
        fuelband: function(){window.alert("func1 called")}
    }

    $( "select" )
      .change(function () {
        var selected = $( "select option:selected" );
        functions[selected.val()]();
      })
      .change();



    </script>

Answer 1

您的slist2 select是动态生成的内容。为了将事件处理程序附加到动态内容，您应该使用$(document).on('change', 'select', function(){})代替。

您正在呼叫functions['Kindle Fire HD']()而不是functions['kindlefirehd']()。

替换

$( "select" )
  .change(function () {
    var selected = $( "select option:selected" );
    functions[selected.val()]();
  })
  .change();

与

$(document).on('change', 'select[name=slist2]', function(){
  var selected = $(this).val();
  var funcName = SList.scontent[selected];
  functions[funcName]();
});

See Demo

Answer 2

你是对的，但错误地

   $( "select" )
      .change(function () {
        var selected = $( "select option:selected" );
        functions[selected.val()]();
      })
      .change();

删除上面的代码请尝试以下示例

<强> JS

    var SList = new Object();             // JS object that stores data for options
    var txtsl2 = '';

    SList.slist2 = {
     "amazon": ['Kindle Fire HD', 'Kindle Charger', 'Kindle Fire HDX'],
     "apple": ['MacBook', 'iMac', 'iPhone', 'iPad'],
     "keurig": ['Platinum', 'Vue'],
     "nike": ['Fuel Band']
    };

SList.scontent = {
 "Kindle Fire HD": 'kindlefirehd',
 "Kindle Charger": 'kindlecharg',
 "Kindle Fire HDX": 'kindlefirehdx',
 "MacBook": 'macbook',
 "iMac": 'imac',
 "iPhone": 'iphone',
 "iPad": 'ipad',
 "Platinum": 'platinum',
 "Vue": 'vue',
 "FuelBand": 'fuelband'
};

SList.getSelect = function(slist, option) {
      document.getElementById('scontent').innerHTML = '';           // empty option-content

if(SList[slist][option]) {
        // if option from the last Select, add text-content, else, set dropdown list
        if(slist == 'scontent'){ document.getElementById('scontent').innerHTML = SList[slist][option];
var selected = SList[slist][option];
functions[selected]();
}
        else if(slist == 'slist2') {
          var addata = '<option>- - -</option>';
          for(var i=0; i<SList[slist][option].length; i++) {
            addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
          }

          document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(\'scontent\', this.value);">'+addata+'</select>';
        }
      }
      else if(slist == 'slist2') {
        // empty the tag for 2nd select list
        document.getElementById('slist2').innerHTML = '';
      }
    }

    var functions = {
        kindlefirehd: function(){window.alert("func1 called")},
        kindlecharge: function(){window.alert("func1 called")},
        kindlefirehdx: function(){window.alert("func1 called")},
        macbook: function(){window.alert("func1 called")},
        imac: function(){window.alert("func1 called")},
        iphone: function(){window.alert("func1 called")},
        ipad: function(){window.alert("func1 called")},
        platinum: function(){window.alert("func1 called")},
        vue: function(){window.alert("func1 called")},
        fuelband: function(){window.alert("func1 called")}
    }

更改

仅在条件
时进行更改
if(SList[slist][option]) { if(slist == 'scontent'){ document.getElementById('scontent').innerHTML = SList[slist][option]; var selected = SList[slist][option]; // Save Selected value to variable functions[selected](); // call function with argument }

JSfiddle

下拉选择后不调用函数

2 个答案: