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

Question

can somebody help me how to put data in options value=""? 有人可以帮助我如何将数据放入选项value =“”中吗？ Please see below code. 请参见下面的代码。

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

And this is the result: 结果如下：

I wanted to display the output as table with image according to the selected car model. 我想根据所选的汽车型号将输出显示为带有图像的表格。

Thanks in advance! 提前致谢！

Answer 1

(just correct) Please, if you give a Question, you must give enough information. （完全正确）请提出问题，必须提供足够的信息。 anyone just show you clue and not write code for you. 任何人都只会向您显示线索，而不是为您编写代码。

you want to show display picture but do not tell everyone about you picture. 您想显示显示图片，但不要告诉所有人有关您的图片。

(answare) to show a image, web have many method to show the image. （知道）显示图像，网络上有很多显示图像的方法。 i just give you example : 我只举一个例子：

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

how to put data in options value="" 如何将数据放入选项value =“”

You dont need to put data in value, instead you can use data attribute. 您不需要将数据放在值中，而是可以使用data属性。

Below is an example of how to use data attribute with option For getting the image , i am using a tag called data-img. 下面是一个如何在option使用data属性的示例为了获取图像，我正在使用一个名为data-img的标签。 You can rename it , but it will be always like data-myChoiceOne,data-myChoiceTwo .It need to have data in it. 您可以重命名它，但它总是像data-myChoiceOne,data-myChoiceTwo它需要包含data 。 If you wan to pass the path of the image location , you can pass in the data attribute 如果要传递图像位置的路径，则可以传递data属性

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

Create function which will be triggered on change in select, pass the this object in the function. 创建将在选择更改时触发的功能，然后this对象传递给功能。 Using this object you can get all the parameters of the selected option 使用该对象，您可以获取所选选项的所有参数

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 accepting the text and image //函数接受文本和图像

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

either you can store image path in the data tag or the image as image64 bit string 您可以将图像路径存储在数据标签中，也可以将图像存储为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>

or 要么

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

you can access the data value as $('#mySelect').data("image") 您可以将数据值访问为$('#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