Javascript / PHP: Как добавить несколько значений из выбора, разделенных запятой, в текстовое поле

Question

Я хотел бы добавить более одного значения в текстовое поле, когда пользователь выбирает значение из поля выбора. Если текстовое поле не пустое, значения будут разделены запятой. Я использую php и javascript, чтобы заполнить оба поля. На данный момент, когда я пытаюсь выбрать другой элемент, значение в текстовом поле заменяется новым.

Вот мой код:

echo' <div>';
                echo' <label for="pnationalite"><strong>Visited countries</strong></label> '; 

                echo' <select onclick="this.form.paysvisites.value=this.options[this.selectedIndex].text;" name="nationalite_ID" > '; 

                $sql = $bdd->query("SELECT * FROM cov_pays"); 

                //Feed the select from the db

                while ($row = $sql->fetch()) 
                {                       
                    echo '<option value="' . $row['LibPays'] . '">' . $row['LibPays'] . '</option>';                            
                }

                echo' </select> ';

                echo' <div>
                        <br /><input type="text" name="paysvisites" placeholder="Please select one country" >
                    </div>

                    ';              

            echo' </div><br/>';

Answer 1

Вы можете использовать функцию javascript, чтобы проверить, есть ли уже выбранные страны в текстовом поле или нет. Вы можете вызвать функцию onchange события поля выбора. Я положил комментарии вместе с кодом. Надеюсь, это поможет.

        <select onchange="addCountry(this)" name="nationalite_ID" >     
        <script>
            function addCountry(s) {
                console.log(s.options[s.selectedIndex].text);                    
                var thisCountry = s.options[s.selectedIndex].text; // latest selection                    
                var selected = s.form.paysvisites.value;  // already selected in the textbox
                console.log(selected);                    
                var toAdd = "";                    
                if(selected.length) {
                     toAdd = ", "; // if there are already selected countries add a comma
                }                    
                if(selected.indexOf(thisCountry) === -1) {    // if this selected country is not already in the textbox, add it                    
                    s.form.paysvisites.value+= toAdd + thisCountry;    
                }                    
            }

        </script>