单击按钮创建SELECT和OPTION元素

时间:2018-07-13 15:04:19

标签: javascript html

我从https://www.w3schools.com/中引用了我发布的代码示例。该特定代码在切换按钮后产生一个选择选项。目前,代码仅使用一个选项生成一个select下拉列表,但我想乘多个选项。特别是,我有一个要在选择框中填充为选项的数组。如何为下拉菜单添加多个选项?谢谢!

List<String> values = Arrays.asList(valuesString.split(","));
List<MyObject> result = myObjectRepository.findByAnyColumns(values);

4 个答案:

答案 0 :(得分:1)

该示例使用单字母变量名称,如果它们使用了更有意义的名称(例如用df <- data.frame(Feats = matrix(rnorm(20), nrow = 20, ncol = 5), ID = sample.int(10, 10)) id_list <- data.frame(ID = sample.int(10,10), Display = sample(c('clear', 'blur'), 20, replace = TRUE), Type = sample(c('red', 'green', 'blue', 'indigo', 'yellow'), 20, replace = TRUE)) Feats.1 Feats.2 Feats.3 Feats.4 Feats.5 ID 1 3.14944573 -0.52285062 3.14944573 -0.52285062 3.14944573 2 2 -0.41096007 0.38256691 -0.41096007 0.38256691 -0.41096007 1 3 0.03629351 -0.02514005 0.03629351 -0.02514005 0.03629351 7 4 0.91257290 1.35590761 0.91257290 1.35590761 0.91257290 5 5 -0.26927311 -2.10213773 -0.26927311 -2.10213773 -0.26927311 3 6 3.14944573 -0.52285062 3.14944573 -0.52285062 3.14944573 4 7 -0.41096007 0.38256691 -0.41096007 0.38256691 -0.41096007 10 8 0.03629351 -0.02514005 0.03629351 -0.02514005 0.03629351 6 9 0.91257290 1.35590761 0.91257290 1.35590761 0.91257290 8 10 -0.26927311 -2.10213773 -0.26927311 -2.10213773 -0.26927311 9 ID Display Type 1 6 clear indigo 2 1 blur blue 3 7 clear red 4 4 clear red 5 3 blur red 6 10 clear yellow 7 2 clear blue 8 8 blur green 9 5 clear blue 10 9 clear green 代替newOption),则您可能已经解决了-只需重复这段代码即可可能只是在循环内生成新选项。

z
function createSelect() {
  var select = document.createElement("SELECT");
  select.setAttribute("id", "mySelect");
  document.body.appendChild(select);

  var items = ["Foo","Bar","Zoo"];
  for(var i = 0;i<items.length;i++) {
    var item = items[i];
    var newOption = document.createElement("option");
    newOption.setAttribute("value", item);
    var textNode = document.createTextNode(item);
    newOption.appendChild(textNode);
    select.appendChild(newOption);
  }
}

建议词-使用mdn代替w3schools,更好的文档和示例。

答案 1 :(得分:0)

您可以使用for循环来迭代选项值数组,并将其附加到下拉列表中,如下所示:

//Example array of values for adding to drop down
const myArray = [ "Dog", "Cat", "Bird" ];

//Iterate your array of values
for(let x = 0; x < myArray.length; x++){
    let z = document.createElement("option");
    z.setAttribute("value", myArray[x]); //Add value of the current item from array
    let t = document.createTextNode(myArray[x]); //Add text of the current item from array
    z.appendChild(t);
    document.getElementById("mySelect").appendChild(z);
}

答案 2 :(得分:0)

我喜欢这种方法,对我来说更干净^^

public static final Behavior<Start> main =
  Behaviors.setup(context -> {
    final String dispatcherPath = "akka.actor.default-blocking-io-dispatcher";

    Props props = DispatcherSelector.fromConfig(dispatcherPath);
    final ActorRef<HelloWorld.Greet> greeter =
      context.spawn(HelloWorld.greeter, "greeter", props);

    return Behaviors.receiveMessage(msg -> {
      ActorRef<HelloWorld.Greeted> replyTo =
          context.spawn(HelloWorldBot.bot(0, 3), msg.name);
      greeter.tell(new HelloWorld.Greet(msg.name, replyTo));
      return Behaviors.same();
    });
  });
function createSelect() {
  var select = document.createElement("select");
  document.body.appendChild(select);

  var items = ["pizza","margherita","buona"];
  
  items.forEach(function(item) {
    var option = document.createElement("option");
    option.text = item;
    select.add(option);
  });
}

答案 3 :(得分:-1)

<p>Click the button to create a SELECT and an OPTION element.</p>

<button onclick="myFunction()">Try it</button>

<script>
    function myFunction() {
        var ele = document.createElement("SELECT");
        ele.setAttribute("id", "mySelect");  
        document.body.appendChild(ele);

        var values=["option0","option1","option2","option3"];
        // foreach the  values array 
        for(i in values){
            // i is  the index of values;
            // create option  item
            var item = document.createElement("option");
            item.setAttribute("value", values[i]);
            item.innerText=values[i]; 
            ele.appendChild(item); 
        } 

    }
</script>