تبديل عناصر القائمة بين قائمتين باستخدام أزرار في JavaScript

StackOverflow https://stackoverflow.com/questions/2307193

سؤال

لديّ هذه المهمة المدرسية التي كنت أعمل عليها وأنا مهتمة تمامًا بالسبب الذي يفعله ما تفعله. في الأساس ، إنها قائمة اختيار يسار ، و 2 أزرار متوسطة ، وقائمة اختيار يمين. والغرض من ذلك هو نقل الخيارات بين القوائم. مشكلتي على النحو التالي: يتم تحديد تحديد في القائمة اليسرى ، ويتم النقر على زر القائمة اليمنى ، ويتم إضافة خيار إلى القائمة اليمنى المسمى "غير محدد" ويختفي التحديد في القائمة اليسرى. لا أريد أن يقوم أي شخص بواجبي من أجلي ، لكن النصائح والتلميحات موضع تقدير كبير.

هذا هو الكود الخاص بي:

<script type="text/javascript">
/* <![CDATA[ */
function moveRight() {
    var leftCurText = document.forms[0].leftSide.selectedIndex.text;
    var leftCurValue = document.forms[0].leftSide.selectedIndex.value;
    var leftCurName = document.forms[0].leftSide.selectedIndex;

    if (leftCurName != -1) {        
        var listName = new Option();
        listName.text = leftCurText;
        listName.value = leftCurValue;
        nextItem = document.forms[0].rightSide.length;
        document.forms[0].rightSide.options[nextItem] = listName;
        document.forms[0].leftSide.options[leftCurName] = null;
    } else if (document.forms[0].leftSide.length <= 0) {
        window.alert("There are no more options in the left list")
    }
    else
        window.alert("No option is selected on the left side");
}

function moveLeft() {
    var rightCurText = document.forms[0].rightSide.selectedIndex.text;
    var rightCurValue = document.forms[0].rightSide.selectedIndex.value;
    var rightCurName = document.forms[0].rightSide.selectedIndex;

    if (rightCurName != -1) {
        var listName = new Option();
        listName.text = rightCurText;
        listName.value = rightCurValue;
        nextItem = document.forms[0].leftSide.length;
        document.forms[0].leftSide.options[nextItem] = listName; 
        document.forms[0].rightSide.options[rightCurName] = null;
    } else if (document.forms[0].rightSide.length <= 0) {
        alert("There are no more options on the right list")
    } else   
        window.alert("No option is selected on the right side");
}
/* ]]>*/
</script>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="Stylesheet" type="text/css" />
</head>
<body>
<h2>This page will switch items between lists</h2>

<div align="center">
    <form action="">
        <table border="3">
            <tr>
                <th>Left List</th>
                <th>Click</th>
                <th>Right List</th>
            </tr>
            <tr>
                <td>
                    <select name="leftSide" size="6">
                        <option value="stephanie">Stephanie</option>
                        <option value="beatriz">Beatriz</option>
                        <option value="carol">Carol</option>
                    </select>
                </td>
                <td>
                    <input type="button" onclick="moveLeft()" name="leftButton" value="<<" /> <br />
                    <input type="button" onclick="moveRight()" name="rightButton" value=">>" />
                </td>
                <td>
                    <select name="rightSide" size="6">
                        <option value="evan">Evan</option>
                        <option value="david">David</option> 
                        <option value="mark">Mark</option>
                    </select>
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
هل كانت مفيدة؟

المحلول

أنت تحاول الحصول على عقارات من selectedIndex خاصية القائمة ، وهو رقم. تريد الحصول عليها من theList.options[theList.selectedIndex].

تحرير: أيضًا ، تتم تسمية متغيراتك بشكل مربك. جرب هذا:

var list = document.forms[0].rightSide;
var index = list.selectedIndex;
var text = list.options[index].text;
var value = list.options[index].value;

وواحد من أكثر الأشياء إثارة للنظر: وظيفتك متماثلين بشكل أساسي. امنح قائمة المصدر وقائمة الهدف كمعلمات إلى عام move() وظيفة.

نصائح أخرى

IDK لماذا الكود قد أفسد جدا. ها هي الوظائف:

تحرك يسارا:

function moveLeft() {
var rightCurText = document.forms[0].rightSide.selectedIndex.text;
var rightCurValue = document.forms[0].rightSide.selectedIndex.value;
var rightCurName = document.forms[0].rightSide.selectedIndex;

if (rightCurName != -1) {
    var listName = new Option();
    listName.text = rightCurText;
    listName.value = rightCurValue;
    nextItem = document.forms[0].leftSide.length;
    document.forms[0].leftSide.options[nextItem] = listName; 
    document.forms[0].rightSide.options[rightCurName] = null;
}
else if (document.forms[0].rightSide.length <= 0) {
    alert("There are no more options on the right list")
}
else   
    window.alert("No option is selected on the right side");
}

تحرك يمينا:

function moveRight() {
var leftCurText = document.forms[0].leftSide.selectedIndex.text;
var leftCurValue = document.forms[0].leftSide.selectedIndex.value;
var leftCurName = document.forms[0].leftSide.selectedIndex;

if (leftCurName != -1) {        
    var listName = new Option();
    listName.text = leftCurText;
    listName.value = leftCurValue;
    nextItem = document.forms[0].rightSide.length;
    document.forms[0].rightSide.options[nextItem] = listName;
    document.forms[0].leftSide.options[leftCurName] = null;
}
else if (document.forms[0].leftSide.length <= 0) {
    window.alert("There are no more options in the left list")
}
else
   window.alert("No option is selected on the left side");
}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top