Блог

Главная - Вопросы по программированию - Добавление и / или удаление всего выпадающего списка выбора

Добавление и / или удаление всего выпадающего списка выбора

#javascript #html

#javascript #HTML

Вопрос:

Я хочу, чтобы, когда пользователь нажимает кнопку, можно было добавлять или удалять выпадающий список для выбора языка и владения им. Какой js. code будет работать для меня?

Я попробовал несколько разных кодов из разных источников, но безрезультатно!

 function addLanguage() {
  var x = document.getElementById("dynamic-select");
  x.labels[x.labels.length] = new Label('-- Choose a Language --', '0', false, false);
}

function removeLanguage() {
  var x = document.getElementById("dynamic-select");
  x.labels[x.labels.length - 1] = null;
}

function removeAllAddedLanguages() {
  var x = document.getElementById("dynamic-select");
  x.labels.length = 0;
}  
 <div id="dynamic-select">
  <label for="dynamicSelect">
   <select data-placeholder="Choose a Language...">
      <option selected disabled value="">-- Choose a language --</option>
			<option value="AF">Afrikanns</option>
			<option value="SQ">Albanian</option>
			<option value="AR">Arabic</option>
			<option value="HY">Armenian</option>
			<option value="EU">Basque</option>
			<option value="BA">Bemba</option>
			<option value="BN">Bengali</option>
		</select>
	<label for="proficiency">Level of proficiency</label>
  <select name="pLevel" id="pLevel">
    <option value="fluent">Fluent</option>
    <option value="fluent">Fluent</option>
    <option value="fluent">Fluent</option>
    <option value="fluent">Novice</option>
    <option value="fluent">No knowledge</option>
  </select>
  </label>
</div>
<button onclick="addLanguage()" id="" class="action_button">Add A Language</button>
<button onclick="removeLanguage()" style="background-color: orange" class="action_button">Remove Last Added</button>
<button onclick="removeAllAddedLanguages()" style="background-color: red" class="action_button">Remove Added Languages</button>

Комментарии:

1. Я сделал вам фрагмент и исправил неполный вариант

2. Когда вы говорите «показать и скрыть», было бы нормально просто скрыть все меню? Если это так, вы могли бы использовать style.display = «none»;

3. Вы пытаетесь удалить фактическое выпадающее меню с экрана или вы пытаетесь очистить все элементы из выпадающего меню и получить пустое выпадающее меню? Кроме того, если вы пытаетесь удалить все элементы из выпадающего меню, вы также хотите, чтобы был удален параметр заполнителя или только реальные элементы?

4. x.labels ?????

Ответ №1:

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

 function addLanguage() {
  var langContainer = document.getElementById('dynamic-select');
  var firstLang = document.getElementsByClassName("lang")[0];
  langContainer.append(firstLang.cloneNode(true));
}
function removeLanguage() {
  var langs = document.getElementsByClassName("lang");
  if (langs.length > 1) { 
    langs[langs.length - 1].remove();
  }
}
function removeAllAddedLanguages() {
  var langContainer = document.getElementById('dynamic-select');
  var firstLang = document.getElementsByClassName("lang")[0];
  langContainer.innerHTML = firstLang.outerHTML;
}  
 <div id="dynamic-select">
  <div class="lang">
    <label for="dynamicSelect">
     <select data-placeholder="Choose a Language...">
        <option selected disabled value="">-- Choose a language --</option>
        <option value="AF">Afrikanns</option>
        <option value="SQ">Albanian</option>
        <option value="AR">Arabic</option>
        <option value="HY">Armenian</option>
        <option value="EU">Basque</option>
        <option value="BA">Bemba</option>
        <option value="BN">Bengali</option>
      </select>
    </label>
    <label for="proficiency">Level of proficiency
    <select name="pLevel" id="pLevel">
      <option value="fluent">Fluent</option>
      <option value="fluent">Fluent</option>
      <option value="fluent">Fluent</option>
      <option value="fluent">Novice</option>
      <option value="fluent">No knowledge</option>
    </select>
    </label>
  </div>
</div>
<button onclick="addLanguage()" id="" class="action_button">Add A Language</button>
<button onclick="removeLanguage()" style="background-color: orange" class="action_button">Remove Last Added</button>
<button onclick="removeAllAddedLanguages()" style="background-color: red" class="action_button">Remove Added Languages</button>

Комментарии:

1. @mplungjan Я думаю, что то же самое касается вашего ответа, потому что «добавить или удалить выпадающий список для выбора языка и владения», я думаю, он хочет добавить новые варианты выбора, а не параметры. И он также говорит как о языке, так и о владении. Я полагаю, он хочет создать что-то вроде linkedin, facebook и других платформ, когда пользователь может добавлять / выбирать несколько языков в свой профиль.

2. Хм, возможно, поэтому в его вопросе говорится одно, а его код намекает на другое, возможно, сочетание вашего и моего, поскольку вы не можете добавить язык

3. Этот ответ прямо здесь решил мою проблему, и я готов идти и теперь приступаю к другим начинаниям! Спасибо, @golddragon007, это работает как шарм!

Ответ №2:

Почему labels ? Если вы правильно назовете выбор, это сработает

Я оставил ваши встроенные прослушиватели событий, но их тоже можно перенести в скрипт. Я меняю кнопки на type = button и присвоил select идентификатор и использовал это

Также у вас был какой-то незаконный HTML (незакрытая метка)

 // this code needs to be after the select is defined OR wrapped in an event listener
var x = document.getElementById("dynamicSelect"); 
var len = x.options.length; // default
function addLanguage() {
  var lan = prompt("Language?","");
  if (lan) {
    x.options[x.options.length] = new Option(lan,lan)
    x.selectedIndex=x.options.length-1;
  }  
}

function removeLanguage() {
  if (x.options.length > 0) x.options.length--; // or x.options.length > len
}

function removeAllAddedLanguages() {
  x.options.length = len;
  x.selectedIndex=0;
}  
 <div id="dynamic-select">
  <label for="dynamicSelect">Language spoken</label>
   <select id="dynamicSelect" data-placeholder="Choose a Language...">
      <option selected disabled value="">-- Choose a language --</option>
      <option value="AF">Afrikanns</option>
      <option value="SQ">Albanian</option>
      <option value="AR">Arabic</option>
      <option value="HY">Armenian</option>
      <option value="EU">Basque</option>
      <option value="BA">Bemba</option>
      <option value="BN">Bengali</option>
  </select>
  <label for="proficiency">Level of proficiency</label>
  <select name="pLevel" id="proficiency">
    <option value="fluent">Fluent</option>
    <option value="fluent">Fluent</option>
    <option value="fluent">Fluent</option>
    <option value="fluent">Novice</option>
    <option value="fluent">No knowledge</option>
  </select>
  </label>
</div>
<button type="button" onclick="addLanguage()" id="" class="action_button">Add A Language</button>
<button type="button" onclick="removeLanguage()" style="background-color: orange" class="action_button">Remove Last Added</button>
<button type="button" onclick="removeAllAddedLanguages()" style="background-color: red" class="action_button">Remove Added Languages</button>