Javascript 使用 setAttribute 和下拉列表将变量从 on change 传递到外部函数 Select

Question

我正在将其中一个表中的字段从自由文本转换为带有一组选项列表的下拉列表。然后我在 onchange 函数中分配所选值，该函数正常工作，但是当我尝试使用 setAttribute 将此变量分配给值元素时，它无法找到它。我尝试研究如何访问函数范围之外的变量，但我无法 link this 到我正在使用的设置属性方法。如果有更好的方法，我也试试。

当在表单上单击编辑按钮时调用下面的代码，如果我删除所有下拉内容并仅使用 x.setAttribute("value",role) 的自由文本，那么它将值传递给 AJAX 调用没问题。我究竟做错了什么？谢谢

  function editProcess(row,id,name,username,email,role){
      //WORKING
      $( "#name"+id+"" ).empty();
      var x = document.createElement("input");
      x.setAttribute("type", "text");
      x.setAttribute("class", "form-control");
      x.setAttribute("value", name);
      x.setAttribute("required", "true");
      x.setAttribute("style", "padding:0");
      x.setAttribute("name","name");
      x.setAttribute("onInput","clearPopUps()");
      $( "#name"+id+"" ).append(x);


      //NOT WORKING
      myParent = document.body;
      //Create array of options to be added
      var roleArray = ["Admin","Officer","Manager"];
      $( "#role"+id+"" ).empty();
      //Create and append select list
      var x = document.createElement("select");
      myParent.appendChild(x);

      //Create and append the options
      for (var i = 0; i < roleArray.length; i++) {
          var option = document.createElement("option");
          option.value = roleArray[i];
          option.text = roleArray[i];
          x.appendChild(option);       
      }
      $('#role').on('change', function() {
          role = $('#role option:checked').val();
          this.selectedOptions[0].setAttribute('value', role);
          x.setAttribute("value", role);
          console.log(x);
      });
      x.setAttribute("type", "text");
      x.setAttribute("class", "form-control");
      //x.setAttribute("value", selectedRole);
      x.setAttribute("required", "true");
      x.setAttribute("style", "padding:0");
      x.setAttribute("name","role");
      x.setAttribute("onInput","clearPopUps()");
      $( "#role"+id+"" ).append(x);
}

Answer 1

您使用 jQuery 中的 val() 方法或香草 javascript 中的 value 属性方法设置下拉列表的值。

$("#using-jQuery").on("click", () => $("#test").val("2") )


document.getElementById("using-vanilla").addEventListener("click", 
     () => document.getElementById("test").value = "3" )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="test">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>


<button id="using-jQuery">Set to 2 using jQuery</button>
<button id="using-vanilla">Set to 3 using Vanilla JS</button>

使用setAttribute不会有同样的效果！

document.getElementById("using-vanilla").addEventListener("click", 
    () => document.getElementById("test").setAttribute("value","3") )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="test">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>


<button id="using-vanilla">Set to 3 using Vanilla JS + setAttribute</button>

Javascript 使用 setAttribute 和下拉列表将变量从 on change 传递到外部函数 Select

Javascript passing variable from on change to outside function using setAttribute and dropdown Select

javascript

jquery

drop-down-menu