Question

我希望用户单击按钮时能够添加或删除用于语言选择和熟练程度的下拉列表。什么js代码对我有用吗？

我尝试了来自不同来源的几个不同代码，但无济于事！

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>

Answer 1

为什么labels？如果您正确命名了选择项，那么它将起作用

我离开了您的内联事件侦听器，但它们也可以移至脚本。我将按钮更改为type = button，并给选择一个ID并使用了

您还有一些非法的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>

Answer 2

我不确定您是否要执行此操作，但这会添加一个新的具有职业的选择列表，但是我没有提供选择列表的名称，因此，如果要通过表单发布，则可能需要添加它

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>

添加和/或删除整个下拉选择列表

2 个答案: