0

在下面的 jquery mobile html 代码中，只要下拉菜单中的多选选项发生变化，就会调用 onchange 函数 (onchangeInDropDown();)。每当有更改时，我都会进行一些耗时的操作（根据所选项目更新 UI）。如果我快速选择多个选项（一个接一个），我会看到一些奇怪的行为。你能否建议我一个更好的方法来处理这个问题。

想过实现以下解决方案，但不知道如何实现。

删除 onchange 功能并将 OK 按钮放在覆盖菜单中。在选择 OK 按钮时，将调用一个函数来获取所有选定的项目并更新相对于选定项目的 UI，即，一起更新而不是每次更改。这里的问题是我不知道如何将确定按钮放在叠加菜单中。有没有办法在覆盖菜单中放置确定按钮

请帮我！！

    <!DOCTYPE html>
<html>
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> Multiselect item </title>

  <link rel="stylesheet" href="css/jquery.mobile-1.3.1.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

  <!-- below three tags , link and script are for showing pop up toast dialogs -->
  <link href="css/toastr.css" rel="stylesheet"/>
  <script type="text/javascript" src="javascripts/toastr.js"></script>
  <link href="css/toastr-responsive.css" rel="stylesheet"/>
  <script type="text/javascript" src="javascripts/jquery.jsPlumb-1.4.1-all-min.js"></script>

<script type="text/javascript">

function onchangeInDropDown (){
    //Performing some time consuming operation and updating the ui based on item selected
}

function getDropDownValue() {

    var inputElems = document.getElementById("item_drop_select");
    count = 0;

for (var i=1; i<inputElems.length; i++) {
    if (inputElems[i].selected == true) {
        count++;
        alert (inputElems[i].value);
        // Update the UI based on item inputElems[i].value
    }
}
}
</script>

</head>
<body>
<form name="myform">
<div id="item_drop" class="ui-screen-hidden" style="display: block" >

<select data-mini="true" id="item_drop_select" name="item_drop_select" size="1" multiple="multiple" data-native-menu="false" onchange="onchangeInDropDown();">
  <option >Multi-select list of item to buy</option>
  <option value="milk" id="milk" >Milk</option>
  <option value="oil" id="oil" >Oil</option>
  <option value="rice" id="rice" >Rice</option>
  <option value="softdrinks" id="softdrinks" >Softdrinks</option>
  <option value="detergent" id="detergent" >Detergent</option>
</select> 

<div data-role="button" id= "goButton" style= "visibility:block" onclick="getDropDownValue();">Get the drop down values </div>

</div>
</form>
</body>
</html>
4

1 回答 1

0

您能否替换此 data-native-menu="true"。它将打开选择菜单作为本机控件。

于 2013-11-12T11:07:27.980 回答