javascript - 在 Javascript 中设置选择

标签 javascript jquery html select

我一直在想办法解决这个问题,但没有成功。

这里下面的代码工作正常。然而,在 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 来做到这一点,如果您正在使用它:

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 - 在 Javascript 中设置选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37338174/

相关文章:

html - 与 Bootstrap 3 垂直对齐

javascript - 在 safari 7.1.3 中从本地文件显示时,Twitter Bootstrap 3.3.4 轮播图像不起作用

javascript - 将 json 数组转换为 Node.js Express.js 中的 var 值

jquery - 调整大小时 Primefaces 对话框位置错误

javascript - 有什么方法可以在 jQuery 中委托(delegate)事件吗?

javascript - 单击列表项无法显示下拉内容

javascript - 点击事件 - 返回内部元素的 id

javascript - parseFloat() 没有解析我的数组中的所有字符串。 JavaScript

javascript - 设置 div 背景颜色的 Angular 指令

javascript - 获取 iframe 内容作为字符串