Question

我的应用程序中有两个选择框，基于第一个选择框选择值，第二个选择框值将显示在DB中。现在问题是如果我在第一个选择框中选择一个值，相应的值将显示在第二个选择框中，我再次更改第一个选择框中的值，第二个选中的框是不清除旧值，我的意思是新值正在添加到旧列表，它添加不更新。如何更改第二个选择列表的旧值以更改我的第一个选择菜单？

我的代码如下，

Jquery的：

 $("#select-choice").on('change', function(event) {
  //$('#select-choice-location option[value!="Select Location"]').remove();
          var catg = this.value;
          var db = window.sqlitePlugin.openDatabase({name: "MYDB"});
          db.transaction(function (tx) {
          tx.executeSql("select Location from Locationlog WHERE Category = '"+catg+"';", [], function (tx, res) {
          for (var i = 0; i < res.rows.length; i++) {
          var opt  = '<option value="';
          opt += res.rows.item(i).Location;
          opt += '">';
          opt += res.rows.item(i).Location;
          opt += '</option>';
          $("#select-choice-location").append(opt);
           }
          $("#select-choice-location").listview('refresh');
         });
         });
     });

HTML code：

 <select name="select-choice" id="select-choice">
                      <option value="Select Category">Select Category</select>
              </select>
              <select name="select-choice-location" id="select-choice-location">
                  <option value="Select Location">Select Location</select>
              </select>

Answer 1

你错过了清除旧选项htmls。

使用empty()它会清除旧的

试试这个

$("#select-choice-location").empty().append(opt)

OR

$("#select-choice").on('change', function(event) {
              $("#select-choice-location").empty(); // Here you clear
              var catg = this.value;
              var db = window.sqlitePlugin.openDatabase({name: "MYDB"});
              db.transaction(function (tx) {
              tx.executeSql("select Location from Locationlog WHERE Category = '"+catg+"';", [], function (tx, res) {
              var opt  = '<option value="">Select</option>';
              for (var i = 0; i < res.rows.length; i++) {
              opt += '<option value="';
              opt += res.rows.item(i).Location;
              opt += '">';
              opt += res.rows.item(i).Location;
              opt += '</option>';

              $("#select-choice-location").append(opt);
               }
              $("#select-choice-location").listview('refresh');
             });
             });
         });

OR

$("#select-choice").on('change', function (event) {
    var catg = this.value;
    var db = window.sqlitePlugin.openDatabase({
        name: "MYDB"
    });
    db.transaction(function (tx) {
        tx.executeSql("select Location from Locationlog WHERE Category = '" + catg + "';", [], function (tx, res) {
            var opt  = '<option value="">Select</option>';
            for (var i = 0; i < res.rows.length; i++) {
                opt += '<option value="';
                opt += res.rows.item(i).Location;
                opt += '">';
                opt += res.rows.item(i).Location;
                opt += '</option>';
            }
            $("#select-choice-location").empty().append(opt);
            $("#select-choice-location").listview('refresh');
        });
    });
});

Answer 2

请使用此代码

$("#select-choice").on('change', function(event) {
      //$('#select-choice-location option[value!="Select Location"]').remove();
              var catg = this.value;
              var db = window.sqlitePlugin.openDatabase({name: "MYDB"});
              db.transaction(function (tx) {
              tx.executeSql("select Location from Locationlog WHERE Category = '"+catg+"';", [], function (tx, res) {
              for (var i = 0; i < res.rows.length; i++) {
              var opt  = '<option value="';
              opt += res.rows.item(i).Location;
              opt += '">';
              opt += res.rows.item(i).Location;
              opt += '</option>';
    $("#select-choice-location").empty();
              $("#select-choice-location").append(opt);
               }
              $("#select-choice-location").listview('refresh');
             });
             });
         });

Answer 3

尝试这样做会有效。

$("#select-choice").on('change', function (event) {
    $("#select-choice-location").empty(); // clear
    var catg = this.value;
    var db = window.sqlitePlugin.openDatabase({
        name: "MYDB"
    });
    db.transaction(function (tx) {
        tx.executeSql("select Location from Locationlog WHERE Category = '" + catg + "';", [], function (tx, res) {
            var opt = '<option value="">Select</option>';
            for (var i = 0; i < res.rows.length; i++) {
                opt += '<option value="';
                opt += res.rows.item(i).Location;
                opt += '">';
                opt += res.rows.item(i).Location;
                opt += '</option>';

                $("#select-choice-location").append(opt);
            }
            $('select').selectmenu('refresh', true);
        });
    });
});

请参阅此处JQM docs

或尝试这个并应用您的自定义功能。

var options = {
    Select1: ["A", "B", "C"],
    Select2: ["D", "E", "F"],
    Select3: ["G", "G", "I"]
};

$(function () {
    $('#firstSelect').change(function () {
        var x = $('#firstSelect :selected').val();
        $('#secondSelect').html("");
        for (index in options[x]) {
            $('#secondSelect').append('<option value="' + options[x][index] + '">' + options[x][index] + '</option>')
        };
    });
});

参考 FIDDLE DEMO

问题刷新/清除Jquery中的on change事件的选择列表？

3 个答案: