jquery

2010-07-22 3 views
10

के माध्यम से चुनिंदा विकल्प ऊपर और नीचे चल रहा है, इसलिए मुझे यह कोड फ़ायरफ़ॉक्स और क्रोम के लिए काम कर रहा है ... यह क्या करता है कि यह आपको HTML चयन फ़ॉर्म के भीतर विकल्पों को पुन: व्यवस्थित करने की अनुमति देता है ... लेकिन फिर जब मैंने कोड का परीक्षण किया आईई 8 के माध्यम से, यह बहुत ही कमजोर है ... यह केवल पहले कुछ क्लिक के लिए काम करता है और इसके बाद आपको इसे काम करने के लिए बटन पर कई बार क्लिक करना होगा ..jquery

क्या किसी को भी कोई अन्य कोड पता है जो आपको अनुमति देता है IE8 में पूरी तरह से काम करता है जो फ़ील्ड आइटम का पुन: व्यवस्थित करें?

<select id="list" multiple="multiple"> 
    <option value="wtf">bahaha</option> 
     <option value="meh">mwaahaha</option> 

</select> 
<button id="mup">Move Up</button> 
<button id="mdown">Move Down</button> 
<a href="#">Add Item</a> 
<a href="#">Remove item</a> 

<script> 

$(document).ready(function(){ 

$('#mup').click(function(){ 

    moveUpItem(); 

}); 

$('#mdown').click(function(){ 

    moveDownItem(); 

}); 


}); 

function moveUpItem(){ 
    $('#list option:selected').each(function(){ 
    $(this).insertBefore($(this).prev()); 
    }); 
} 

function moveDownItem(){ 

    $('#list option:selected').each(function(){ 
    $(this).insertAfter($(this).next()); 
    }); 

} 
+2

वास्तव में अपने प्रश्न से संबंधित नहीं है, लेकिन अगर आप बस से पहले 'प्रत्येक()' विकल्पों पीछे करके अपने 'moveDownItem()' समारोह सुरक्षित रूप से एक का चयन करें बॉक्स कि एकाधिक चयन के लिए अनुमति देता है संभाल करने के लिए सुधार कर सकते हैं, तो '$ ($ ('# सूची विकल्प: चयनित') की तरह।()। रिवर्स()) प्राप्त करें। प्रत्येक (फ़ंक्शन() {// etc ..}' –

+0

अच्छी तरह से देखा @MickByrne – Adi

उत्तर

4

विकल्पों को बदलने के लिए आपका कोड ठीक काम करता है। ऐसा लगता है कि आईई 8 click ईवेंट के साथ "तेज़" दूसरा क्लिक नहीं कर रहा है बल्कि इसे संभालने के लिए double click की अपेक्षा करता है।

नीचे अपने परीक्षण कोड का उपयोग करना, आपको पता चलेगा कि IE8 में बाहर जब Move Down/Up दबाया जाता है "तेज" निम्नलिखित लिखते हैं:

Move Down Click 
Move Down Double-Click 
Move Down Click 
Move Down Double-Click 

लेकिन एफएफ/क्रोम के साथ निम्न छपा है:

Move Down Click 
Move Down Click 
Move Down Double-Click 
Move Down Click 
Move Down Click 
Move Down Double-Click 

यहां कोड है जिसका मैं परीक्षण करने के लिए उपयोग कर रहा हूं। मैंने यह देखने के लिए कोई परीक्षण नहीं किया है कि यह jQuery की घटना बाइंडर्स है जो मुद्दों का कारण बन रहा है।

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head>  
    <title>Test</title> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 

</head> 
<body> 

<select id="list" multiple="multiple"> 
    <option value="option1">Option 1</option> 
    <option value="option2">Option 2</option> 
    <option value="option3">Option 3</option> 
</select> 

<button id="mup">Move Up</button> 
<button id="mdown">Move Down</button> 

<script type="text/javascript"> 

var $DEBUG = null; 

$(document).ready(function() 
{ 
    $DEBUG = $("#debug"); 

    $DEBUG.append("Registering Events<br />"); 

    $("#mup").click(moveUpItem); 
    $("#mdown").click(moveDownItem); 
    $("#mup").bind("dblclick", function() 
    { 
     $DEBUG.append("Move Up Double-Click<br />"); 
    }); 
    $("#mdown").bind("dblclick", function() 
    { 
     $DEBUG.append("Move Down Double-Click<br />"); 
    }); 

}); 

function moveUpItem() 
{ 
    $DEBUG.append("Move Up Click<br />"); 
} 

function moveDownItem() 
{ 
    $DEBUG.append("Move Down Click<br />"); 
} 

</script> 

<div id="debug" style="border: 1px solid red"> 
</div> 

</body> 

</html> 

संपादित करें: मैं पुष्टि कर सकता यह IE8 समस्या है। $ (Document) .ready में इस IE8 विशिष्ट कोड स्वैप() हैंडलर:

// $("#mup").click(moveUpItem); 
$("#mup")[0].attachEvent("onclick", moveUpItem); 
// $("#mdown").click(moveDownItem); 
$("#mdown")[0].attachEvent("onclick", moveUpItem); 
// $("#mup").bind("dblclick", function() 
$("#mup")[0].attachEvent("ondblclick", function() 
{ 
    $DEBUG.append("Move Up Double-Click<br />"); 
}); 
// $("#mdown").bind("dblclick", function() 
$("#mdown")[0].attachEvent("ondblclick", function() 
{ 
    $DEBUG.append("Move Down Double-Click<br />"); 
}); 
0

मुझे लगता है कि यह कैसे करना है की कुछ विचार दे देंगे, आप गतिशील रूप से एक में जाना जाता है की स्थिति अभी से पहले किसी भी विकल्प दे सकते हैं दोनों के मूल्यों को जानने, एक कदम और स्थिति से एक के लिए:

How would you dynamically order an <option select> list using JQuery?

3

उदाहरण: 1 विकल्प से पहले 3 विकल्प स्थानांतरित करने के लिए, हम jQuery नीचे का उपयोग कर सकते हैं:

0

मुझे पता है कि यह एक छोटा सा पुराना है, लेकिन मैंने हाल ही में यह सरल jQuery प्लगइन बनाया है ताकि एकाधिक चयन तत्वों में तत्वों को पुन: व्यवस्थित किया जा सके।

एक नज़र डालें और देखें कि यह आपके लिए मदद करता है, मैंने IE8, IE9, क्रोम, फ़ायरफ़ॉक्स, ओपेरा में परीक्षण किया है।

http://fedegiust.github.io/selectReorder/