如何在选项value =“”中放置/具有值/数据？

Question

有人可以帮助我如何将数据放入选项value =“”中吗？ 请参见下面的代码。

<!DOCTYPE html>
<html>
<body>

<h3>Preventive Maintenance Cost</h3>

<select id="mySelect" onchange="myFunction()">
  <option value="">-- Select a model --</option> 
  <option value="accord_mm">Accord (Metro Manila)</option>
  <option value="accord_pro">Accord (Provincial)</option>
  <option value="brio_mm">Brio/Amaze (Metro Manila)</option>
  <option value="brio_pro">Brio/Amaze (Provincial)</option>
  <option value="city_mm">City (Metro Manila)</option>
  <option value="city_pro">City (Provincial)</option>
  <option value="civic_mm">Civic (Metro Manila)</option>
  <option value="civic_pro">Civic (Provincial)</option>
  <option value="crv_mm">CR-V (Metro Manila)</option>
  <option value="crv-pro">CR-V (Provincial)</option>
  <option value="crz_mm">CR-Z (Metro Manila)</option>
  <option value="crz_pro">CR-Z (Provincial)</option>
  <option value="hrv_mm">HR-V (Metro Manila)</option>
  <option value="hrv_pro">HR-V (Provincial)</option>
  <option value="jazz_mm">Jazz (Metro Manila)</option>
  <option value="jazz_pro">Jazz (Provincial)</option>
  <option value="legend_mm">Legend (Metro Manila)</option>
  <option value="legend_pro">Legend (Provincial)</option>
  <option value="mobilio_mm">Mobilio (Metro Manila)</option>
  <option value="mobilio_pro">Mobilio (Provincial)</option>
  <option value="odyssey_mm">Odyssey (Metro Manila)</option>
  <option value="odyssey_pro">Odyssey (Provincial)</option>
  <option value="pilot_mm">Pilot (Metro Manila)</option>
  <option value="pilot_pro">Pilot (Provincial)</option>
</select>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("mySelect").value;
    document.getElementById("demo").innerHTML = "Details: </br>" + x;
}
</script>

</body>
</html>

结果如下：

我想根据所选的汽车型号将输出显示为带有图像的表格。

提前致谢！

Answer 1

（完全正确）请提出问题，必须提供足够的信息。 任何人都只会向您显示线索，而不是为您编写代码。

您想显示显示图片，但不要告诉所有人有关您的图片。

（知道）显示图像，网络上有很多显示图像的方法。 我只举一个例子：

 $("#car").change(function(){ var directory = "../../../"; // example place of picture var picture = this.value; // this a value if you change var format = ".png"; // this format you picture $("#display_car").attr({ "src":directory+picture+format, "alt":"image "+picture+" is broken" }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <select id='car'> <option hidden selected>Pick Your Car</option> <option value='car1'>car1</option> <option value='car2'>car2</option> </select> <img id='display_car' /> <p> Why broken? because in <img>, IF picture can't load, the alt is return :) </p>

Answer 2

如何将数据放入选项value =“”

您不需要将数据放在值中，而是可以使用data属性。

下面是一个如何在option使用data属性的示例为了获取图像，我正在使用一个名为data-img的标签。 您可以重命名它，但它总是像data-myChoiceOne,data-myChoiceTwo它需要包含data 。 如果要传递图像位置的路径，则可以传递data属性

HTML

<option value="">-- Select a model --</option>
<option value="accord_mm" data-img='http://img.autobytel.com/car-reviews/autobytel/11694-good-looking-sports-cars/2016-Ford-Mustang-GT-burnout-red-tire-smoke.jpg'>Accord (Metro Manila)</option>
<option value="accord_pro" data-img="http://static5.businessinsider.com/image/582de470e02ba72e008b4e76-1200/lamborghini-huracan-rwd-spyder.jpg">Accord (Provincial)</option>

JS

创建将在选择更改时触发的功能，然后this对象传递给功能。 使用该对象，您可以获取所选选项的所有参数

function myFunction(obj) {
  //get image
  var img = obj.options[obj.selectedIndex].getAttribute('data-img');
  //get the text
  var val = obj.options[obj.selectedIndex].getAttribute('value');
  //table where news rows will be appeneded
  var tab = document.getElementById("demo");
  //append new rows
  tab.appendChild(createTable(val, img))
}

//函数接受文本和图像

function createTable(text, img) {
 //Creating new row
  var row = document.createElement('tr');
  //creating cell for text
  var cellText = document.createElement('td');
  cellText.innerHTML = text;
  //creating cell for image
  var cellImg = document.createElement('td');
   // adding the image as style
  cellImg.style = "background-image:url(" + img + ");background-repeat:no-repeat;background-size:250px 180px;   width: 250px; height: 180px;"
  row.appendChild(cellText); // appending text cell
  row.appendChild(cellImg); // appending image cell 
  return row; // return the row

}

演示

Answer 3

您可以将图像路径存储在数据标签中，也可以将图像存储为image64位字符串

<select id="mySelect" onchange="myFunction()">
  <option value="">-- Select a model --</option> 
  <option data-image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA1IAAAEsCAYAAADJkYKfAAAg" value="accord_mm">Accord (Metro Manila)</option>
</select>

要么

<select id="mySelect" onchange="myFunction()">
  <option value="">-- Select a model --</option> 
  <option data-image="{image-path} /src/images/accord_mm.jpg" value="accord_mm">Accord (Metro Manila)</option>
</select>

您可以将数据值访问为$('#mySelect').data("image")

<img id="demo" src="">

<script>
function myFunction() {
    var select = document.getElementById("mySelect");
    var image-path= select.getAttribute('data-image');
    var image = document.getElementById("demo");
    image.src = image-path;
}
</script>

如何在选项value =“”中放置/具有值/数据？

问题描述

3 个解决方案

解决方案1
2 2017-03-20 07:44:40

解决方案2
1 2017-03-20 07:17:59

解决方案3
0 已采纳 2017-03-20 06:47:47

如何在选项value =“”中放置/具有值/数据？

问题描述

3 个解决方案

解决方案1 2 2017-03-20 07:44:40

解决方案2 1 2017-03-20 07:17:59

解决方案3 0 已采纳 2017-03-20 06:47:47

解决方案1
2 2017-03-20 07:44:40

解决方案2
1 2017-03-20 07:17:59

解决方案3
0 已采纳 2017-03-20 06:47:47