Need help in adding selected items from selectbox to div (dynamic addition)_问答_开发者

Need help in adding selected items from selectbox to div (dynamic addition)

开发者 https://www.devze.com 2023-03-28 01:12 出处：网络

I need to display the selected sub-categories (multi) in the below div and also in some situations I need to close the div elements that are selected wrongly from the select box, so that I can add and

Even I made the similar code, but its not working for multi selection.

Briefly, I need the selected categories (multi) with close buttons in the below div.

<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>
        </s开发者_开发问答elect>
        <div id="check">
        </div></form>
</body>
</html>

Loop over the options and check if they are selected, something like this:

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>";
        }
    }

}

Here is a fiddle of what could work for you: 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;
}