我一直试图找出如何徒劳地解决此问题的方法。

在这里下面的代码工作正常。但是,在jsfiddle中,没有什么比HTML文件中更好。

我不知道这是怎么回事。谁能告诉我如何解决?



function selectItems() {
    var myDiv = document.getElementById("car-select");
    var array = ["McLaren", "Ferrari", "Mercedes"];
    var selectList = document.createElement("select");
    selectList.setAttribute("id", "Car");
    myDiv.appendChild(selectList);
    for (var i = 0; i < array.length; i++) {
        var option = document.createElement("option");
        option.setAttribute("value", array[i]);
        option.text = array[i];
        selectList.appendChild(option);
    }

    var myDiv2 = document.getElementById("tyre-select");
    var array2 = ["Bridgestone", "Michelin", "Continental"];
    var selectList2 = document.createElement("select");
    selectList2.setAttribute("id", "Eng");
    myDiv2.appendChild(selectList2);
    for (var i = 0; i < array2.length; i++) {
        var option2 = document.createElement("option");
        option2.setAttribute("value", array2[i]);
        option2.text = array2[i];
        selectList2.appendChild(option2);
    }
}

<body class="car-showing" onload="selectItems()">
    <div id="PPMCar">
        <form method="post">
            <ul>
              <li class="engine-item">
                    <div class="engine-details-name">
                        <a class="race-team">Race Team</a>
                        <ul class="car-attributes">
                            <div id="car-select">
                                <li>#1:</li>
                            </div>
                            <div id="tyre-select">
                                <li>#2:</li>
                            </div>
                        </ul>
                    </div>
                </li>
              </ul>
        </form>
    </div>
</body>

最佳答案

您的代码对我来说很好,而且Michael Gaskill的代码确实没有错,我只是一个人,如果我看到同一代码被多次实施,我会努力寻找一种不必重复自己的方法。

这种方式在我们的函数内部声明了一个函数。生成的代码完成了同样的事情,但最终获得了一些描述,并删除了许多冗余过程。



function selectItems() {
  var fn = function(el,select_id, arr) {
    var selectList = document.createElement("select");
    selectList.setAttribute("id", select_id);

    for (var i = 0; i < arr.length; i++) {
      var option = document.createElement("option");
      option.setAttribute("value", arr[i]);
      option.text = arr[i];
      selectList.appendChild(option);
    }
    el.appendChild(selectList);
  };
  var car_select = document.getElementById("car-select");
  var car_brands = ["McLaren", "Ferrari", "Mercedes"];
  fn(car_select, 'car', car_brands);

  var tyre_select = document.getElementById("tyre-select");
  var tyre_brands = ["Bridgestone", "Michelin", "Continental"];
  fn(tyre_select, 'tyre', tyre_brands);
}

<body class="car-showing" onload="selectItems()">
  <div id="PPMCar">
    <form method="post">
      <ul>
        <li class="engine-item">
          <div class="engine-details-name">
            <a class="race-team">Race Team</a>
            <ul class="car-attributes">
              <div id="car-select">
                <li>#1:</li>
              </div>
              <div id="tyre-select">
                <li>#2:</li>
              </div>
            </ul>
          </div>
        </li>
      </ul>
    </form>
  </div>
</body>





编辑

要说出我对Gaskill代码的评论,如果您正在使用jQuery,可以使用jQuery:



function selectItems() {

  var create_select = function(parent, select_id, options) {

    var select = $('<select />', {
      id: select_id,
      name: select_id
    });

    options = options.map(function(el, i) {
      return $('<option />', {
        value: el,
        html: el
      });
    });
    select.append(options).appendTo($(parent));

  };

  var car_select = $("#car-select");
  var car_brands = ["McLaren", "Ferrari", "Mercedes"];
  create_select(car_select, 'car', car_brands);


  var tyre_select = document.getElementById("tyre-select");
  var tyre_brands = ["Bridgestone", "Michelin", "Continental"];
  create_select(tyre_select, 'tyre', tyre_brands);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class="car-showing" onload="selectItems()">
  <div id="PPMCar">
    <form method="post">
      <ul>
        <li class="engine-item">
          <div class="engine-details-name">
            <a class="race-team">Race Team</a>
            <ul class="car-attributes">
              <div id="car-select">
                <li>#1:</li>
              </div>
              <div id="tyre-select">
                <li>#2:</li>
              </div>
            </ul>
          </div>
        </li>
      </ul>
    </form>
  </div>
</body>

关于javascript - 在Java中设置“选择”,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37338174/

10-11 06:04