0

以下の jquery モバイル HTML コードでは、ドロップダウンの複数選択オプションが変更されるたびに onchange 関数 (onchangeInDropDown();) が呼び出されます。変更があるたびに、時間のかかる操作 (選択した項目に基づいて UI を更新する) を行っています。複数のオプションをすばやく (次々に) 選択すると、奇妙な動作が見られます。これを処理するためのより良い方法を教えてください。

次のソリューションを実装することを考えましたが、実装方法がわかりません。

onchange 機能を削除し、オーバーレイ メニューに [OK] ボタンを配置します。[OK] ボタンを選択すると、関数が呼び出されて、選択されたすべての項目が取得され、選択された項目に関して UI が更新されます。つまり、すべての変更ではなく、すべてまとめて更新されます。ここでの問題は、オーバーレイ メニューに [OK] ボタンを配置する方法がわからないことです。オーバーレイメニューにOKボタンを配置する方法はありますか

私を助けてください！！

    <!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" を置き換えてください。Select メニューをネイティブ コントロールとして開きます。

于 2013-11-12T11:07:27.980 に答える