根据第一个选择选项填充第二个选择

Question

我有一个多选，我正在尝试的代码是从我将获得的查询数据中填充第二个选择，例如对函数进行 ajax 调用，并且该函数将从选择中附加或删除条目

我试过这样的

$(document).ready(function{
    $("#desk").change(function() {
        var deskid = $("#desk :option").attr('id');
        $.ajax ({
            url: mypagephp?dataid=deskid // [acomma seperated values of the all above chosen desks]
        });
    });
});

我的html代码是这样的

<tr>
    <td width="19%">Desk</td>
    <td width="81%">
        <select name="desk" id="desk" multiple="multiple" class="select">
            <cfoutput query="getAllDesk">
                <option value="100" id="100">Test 1</option>
                <option value="101" id="101">Test 2</option>
                <option value="102" id="102">Test 3</option>
                <option value="103" id="103">Test4</option>
            </cfoutput> 
        </select>
    </td>
</tr>

但我认为我正在失去某种方式，我需要执行每个调用并将 ajax 调用嵌套在每个调用中，这样我就可以将多个条目以逗号分隔的形式传递给 ajax cal，它可以填充第二个选择

Answer 1

我会使用听起来像您正在尝试做的复选框。以下代码将为您提供一个包含所有选定选项的数组，然后您使用逗号加入以获取您要通过 AJAX 发送的字符串。

$('#desk').on('submit',function(){
  //this will loop through checked boxes and put them in the
  //'checkedValues' variable as an array
  var checkedValues = $(this).find(':checkbox:checked').map(function(){
    return this.value;
  }).get();
  //then join the array and you'll have your comma separated string
  //with all selected values
  var desksString = checkedValues.join(',');
  console.log(desksString);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="desk">
  <input type="checkbox" value="100" name="desk1"/>Test 1<br>
  <input type="checkbox" value="101" name="desk2"/>Test 2<br>
  <input type="checkbox" value="102" name="desk3"/>Test 3<br>
  <input type="submit" value="Submit">
</form>