Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML Multiselect dropdown Java Script not working at when Add Multiple Fields.

laEdu

laEdu

New Coder
I have problem with setting up multiselect dropdown menu.. HTML Multiselect dropdown Java Script not working at when Add Multiple Fields.

This is my fill script link - <https://jsfiddle.net/13yeasedu/j6gd5kvo/12/>

[CODE lang="html" title="Head"]<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://code.jquery.com/jquery-1.4.3.min.js" integrity="sha256-+ACzmeXHpSVPxmu0BxF/44294FKHgOaMn3yH0pn4SGo=" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.css">[/CODE]

Code: 
<div id="Multiple-Fields">

<p>   

<label for="items_list">

<select name="items_lists" id="choices-multiple" placeholder="Please Select The Items" multiple>

<option value="Item 1">Item 1</option>

<option value="Item 2">Item 2</option>

</select>

</label>   

</p>

</div>

<h6><a href="#" id="add_Multiple-Fields">Add Multiple Fields</a></h6>

JavaScript: 
<script>



    $(document).ready(function(){



    var multipleCancelButton = new Choices('#choices-multiple', {

    removeItemButton: true,

    maxItemCount:5,

    searchResultLimit:5,

    renderChoiceLimit:5

    });



    });



</script>



<script>

$(function() {

        var scntDiv = $('#Multiple-Fields');

        var i = $('#Multiple-Fields p').size() + 1;

      

        $('#add_Multiple-Fields').live('click', function() {

      

                $('<p> <label for="items_list"><select name="items_lists" id="choices-multiple" placeholder="Please Select The Items" multiple><option value="Item 1">Item 1</option><option value="Item 2">Item 2</option></select></label> <a href="#" id="rem_Multiple-Fields">Remove</a></p>').appendTo(scntDiv);

              

                i++;

                return false;

        });

      

        $('#rem_Multiple-Fields').live('click', function() {

                if( i > 2 ) {

                        $(this).parents('p').remove();

                        i--;

                }

                return false;

        });

});

</script>
 
Sort by date Sort by votes
IaEdu I am not sure if your having a problem sending the list of multiple choices or trying to add an option to the options already in the select list. The latter sounds strange so I’ll address the former. I apologize for not using Jquery. I don’t like it and don’t use it. Answer in pure, raw JavaScript.

But first lets correct your HTML:
You have your <select> in a LABEL inside a Paragraph inside a DIV. A select does not need to be in a div. It exists on it’s own. It never should be a paragraph.

The select has a name="items_lists" and an id="choices-multiple". name is only needed if your sending the <form> and not using JS. And that is what I’d suggest you do.

Your <label> is setting the for to the select name. Wrong it should target the id.

While we may place an <input> inside the label, it’s not good to do that for a <select>

The last line is just to show you the results. The "selected" variable can be sent to your PHP file.

Code: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="main.css">
    <title>My Site</title>
    <style></style>
</head>
<body>

<label for="choices-multiple">Please Select The Items</label><br>
<select id="choices_multiple" size="5" multiple>
  <option value="Item 1">Item 1</option>
  <option value="Item 2">Item 2</option>
  <option value="Item 3">Item 3</option>
  <option value="Item 4">Item 4</option>
  <option value="Item 5">Item 5</option>
</select><br>
<button id="Pick">I Made My Selections</button><br><br>
<p id="out"></p>

<script>
document.getElementById("Pick").addEventListener("click", function() {
  let multiSelect = document.getElementById("choices_multiple").selectedOptions;
  let selected = "";
  for (let i=0; i<multiSelect.length; i++) {
    selected += multiSelect[i].label+",";
  }
  document.getElementById("out").innerHTML = selected;
});
</script>
</body>
</html>
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom