드롭 다운 (jquery mobile)에서 다중 선택을 처리하는 방법은 무엇입니까?

아래 jquery 모바일 HTML 코드에서 드롭 다운의 다중 선택 옵션이 변경 될 때마다 onchangeInDropDown();)이 호출됩니다. 변경이있을 때마다 시간이 많이 소요되는 작업 (선택한 항목을 기반으로 UI 업데이트)을 수행하고 있습니다. 하나 이상의 옵션을 신속하게 선택하면 이상한 동작이 나타납니다. 이 문제를 해결할 더 좋은 방법을 제안 해주십시오.드롭 다운 (jquery mobile)에서 다중 선택을 처리하는 방법은 무엇입니까?

다음 솔루션을 구현하려는 생각은 있지만이를 구현하는 방법을 알지 못합니다.

onchange 함수를 제거하고 오버레이 메뉴에 확인 버튼을 넣습니다. OK 버튼을 선택하면 모든 항목을 선택하고 선택한 항목에 대한 UI를 업데이트하는 함수가 호출됩니다 (즉, 모든 변경 사항 대신 모두 업데이트 됨). 여기서 문제는 오버레이 메뉴에 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>

출처

2013-08-28 user2724311

이 데이터 -native-menu = "true"를 바꿀 수 있습니까? 선택 메뉴가 기본 컨트롤로 열립니다.

출처

2013-11-12 11:07:27 jagruti

드롭 다운 (jquery mobile)에서 다중 선택을 처리하는 방법은 무엇입니까?

답변

관련 문제