Question

有人可以帮助我如何将数据放入期权值=＆＃34;＆＃34;？请参阅下面的代码。

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

（刚才正确）如果您提出问题，请提供足够的信息。任何人只是告诉你线索，而不是为你编写代码。

你想要显示显示图片，但不要告诉每个人你的照片。

（answare）为了显示图像，网络有很多方法来显示图像。我给你举个例子：

＆＃13;

$("#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"
    });
});

＆＃13;

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

＆＃13;

Answer 2

如何将数据放入期权值=“”

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

以下是如何将data属性与option一起使用的示例为了获取图像，我使用了一个名为data-img的标签。您可以重命名它，但它总是像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>

<强> JS

创建将在select中更改时触发的函数，传递函数中的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

}

DEMO

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>

如何在选项值中放置/拥有值/数据=＆＃34;＆＃34;？

3 个答案: