需要帮助将所选项目从选择框添加到div(动态添加)

时间:2011-08-15 17:59:12

标签: javascript javascript-events

我需要在下面的div中显示所选的子目录(多个),并且在某些情况下我需要关闭从选择框中错误选择的div元素,以便我可以向div添加和删除元素(通过上面的选择框)。

即使我制作了类似的代码,但它不能用于多选。

简单地说,我需要在下面的div中使用关闭按钮选择的catogories(multi)。

非常感谢提前。

<script type="text/javascript">
function selectlist() {
    checkboxhome = document.getElementById("check");
    catogery = document.getElementById("cat");
    value = catogery.options[catogery.selectedIndex].value;
    checkboxhome.innerHTML = "<br/> <p>" + value + "</p>";

}
</script>
<body>
    <form action="#" enctype="multipart/form-data">
        <select name="cat" id="cat" onchange="selectlist();" multiple="multiple">
            <option>Select subcatogery</option>
            <option value="fashion">Fashion</option>
            <option value="jewelry">Jewelry</option>
            <option value="dresses">dresses</option>
            <option value="shirts">Shirts</option>
            <option value="diamonds">Diamonds</option>
        </select>
        <div id="check">
        </div></form>
</body>
</html>

2 个答案:

答案 0 :(得分:0)

循环option并检查它们是否被选中,如下所示:

function selectlist() {
    var checkboxhome = document.getElementById("check");
    var category = document.getElementById("cat");
    checkboxhome.innerHTML = '';
    for (var i = 0; i < category.options.length; i++) {
        if (category[i].selected) {
            checkboxhome.innerHTML += "<p>" + category.options[i].value + "</p>";
        }
    }

}

答案 1 :(得分:0)

以下是可能对你有用的小提琴:http://jsfiddle.net/maniator/W6gnX/

Javascript:

function selectlist() {
    checkboxhome = document.getElementById("check");
    catogery = document.getElementById("cat");
    value = getMultiple(catogery);
    checkboxhome.innerHTML = "<br/> <p>" + value + "</p>";

}


function getMultiple(ob)
{
    var arSelected = new Array(), length = ob.length, i = 0, indexes = [];
    while (ob.selectedIndex != -1 && i < length)
    {
        if (ob.selectedIndex != 0 && !in_array(ob.selectedIndex, indexes)) {
            indexes.push(ob.selectedIndex)
            arSelected.push(ob.options[ob.selectedIndex].value);
        }
        ob.options[ob.selectedIndex].selected = false;
        i++;
    }
    var count = 0;
    while(count < indexes.length){
        ob.options[indexes[count]].selected = true;
        count ++;
    }
    return arSelected;
}

function in_array(needle, haystack)
{
    for(var key in haystack)
    {
        if(needle === haystack[key])
        {
            return true;
        }
    }

    return false;
}