Javascript 如何将值/数据放入选项值=”中&引用；？_Javascript_Html

Javascript 如何将值/数据放入选项值=”中&引用；？

javascript html

Javascript 如何将值/数据放入选项值=”中&引用；？,javascript,html,Javascript,Html,有人能帮我把数据放在选项值“”中吗？请参阅下面的代码 <!DOCTYPE html> <html> <body> <h3>Preventive Maintenance Cost</h3> <select id="mySelect" onchange="myFunction()"> <option value="">-- Select a model --</option> <opt

有人能帮我把数据放在选项值“”中吗？请参阅下面的代码

<!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>


预防性维修费用
--选择一个模型--
雅阁（大马尼拉）
雅阁（省级）
Brio/Amaze（大马尼拉）
Brio/Amaze（省级）
城市（马尼拉）
城市（省级）
思域（马尼拉）
文娱（省级）
CR-V（大马尼拉）
CR-V（省级）
CR-Z（大马尼拉）
CR-Z（省级）
HR-V（大马尼拉）
HR-V（省级）
爵士乐（马尼拉）
爵士乐（省级）
传奇（大马尼拉）
图例（省级）
美孚（马尼拉）
移动电话（省级）
奥德赛（大马尼拉）
奥德赛（省级）
领航员（大马尼拉）
试点（省级）

函数myFunction（）{
var x=document.getElementById（“mySelect”）.value；
document.getElementById（“demo”）.innerHTML=“详细信息：
”+x；
}

这就是结果：

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

提前谢谢

可以将图像路径存储在数据标记中，也可以将图像存储为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>

您可以将图像路径存储在数据标记中，也可以将图像存储为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>

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

您不需要将数据放入值中，而是可以使用

data

属性

下面是如何将

数据

属性与

选项

为了获得图像，我使用了一个名为dataimg的标签。您可以重命名它，但它始终类似于

data myChoiceOne，data myChoiceTwo

。它需要包含

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>

//函数接受文本和图像

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

}