时间戳

首页 > 解决方案 > Javascript 使用 setAttribute 和下拉选择将变量从更改传递到外部函数

javascript - Javascript 使用 setAttribute 和下拉选择将变量从更改传递到外部函数

问题描述

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

当在表单上单击编辑按钮时调用下面的代码，如果我删除所有下拉内容并仅使用 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);
}

标签： javascriptjquerydrop-down-menu

解决方案

val()您可以使用jQuery 中的方法或valuevanilla javascript 中的属性设置下拉列表的值。

$("#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>

推荐阅读