选定值Javascript的不同InnerHTML输出答案

【问题标题】：Different InnerHTML Output For Selected Value Javascript选定值Javascript的不同InnerHTML输出
【发布时间】：2020-03-10 21:50:51
【问题描述】：

So basically what I want here is to create a hidden paragraph and when each value is selected the hidden paragraph shows the custom text I set up for each value .所以基本上如果我选择奥迪我想输入：随机文本/宝马>随便/梅赛德斯>汽车，

重点是为每个选定的值自定义其显示的文本

完全需要这个，所以任何帮助都非常感激！

    <!DOCTYPE html>
<html>
<body>

<p>Select a new car from the list.</p>

<select id="mySelect" onchange="myFunction()">
  <option value="Audi">Audi
  <option value="BMW">BMW
  <option value="Mercedes">Mercedes
  <option value="Volvo">Volvo
</select>

<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>

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

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

</body>
</html>

【问题讨论】：

你为什么不把你想要的每个车名的文本作为值？
因为我不知道该怎么做哈哈

标签： javascript html css

【解决方案1】：

如何为随机数据添加数据属性，例如：

    <!DOCTYPE html>
<html>
<body>

<p>Select a new car from the list.</p>

<select id="mySelect" onchange="selectionChanged(this)">
  <option value="Audi" data="random audi data">Audi
  <option value="BMW" data="random bmw data">BMW
  <option value="Mercedes" data="random mercedes data">Mercedes
  <option value="Volvo" data="random volvo data">Volvo
</select>

<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>

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

<script>
function selectionChanged(selectObj) {

  var carData = selectObj.options[selectObj.selectedIndex].getAttribute('data');

  var x = document.getElementById("mySelect").value;
  document.getElementById("demo").innerHTML = "You selected: " + x+ " with car data "+carData;
}
</script>

</body>
</html>

这样您可以将数据与选项保存在一起，因此您无需在其他地方跟踪它。

【讨论】：

嘿，非常感谢您的回答，我需要的是不同的文本输出，我可以为每辆选择的汽车手动输入，所以基本上如果我选择 Audit 我想输入 >Fan of Audi，如果我选择我想输入的梅赛德斯 > 梅赛德斯很棒

【解决方案2】：

我不确定是否理解您的问题，但我认为这是一个可能的解决方案：

function myFunction() {
    let messages = {
        Audi: 'Haldo for: ',
        BMW: 'Maldo for: ',
        Mercedes: 'Baldo for',
        Volvo: 'Marioldo for'
    }
    var x = document.getElementById("mySelect").value;
    document.getElementById("demo").innerHTML = `${messages[x]} ${x}`;
}
myFunction(); // Now run the funtion for a init

我创建了一个带有 n 个键的 JSON，其值为 select 的单个选项，并使用 select 类似选择器的值来获取分配给 JSON 中键的字符串。

更新评论中的问题

    <!DOCTYPE html>
    <html>

      <body>

        <p>Select a new car from the list.</p>

        <select id="mySelect" onchange="myFunction()">
          <option value="Audi">Audi
          <option value="BMW">BMW
          <option value="Mercedes">Mercedes
          <option value="Volvo">Volvo
        </select>

        <p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>

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

        <ul id="list">

        </ul>


        <script>
          function myFunction() {
            let messages = {
              Audi: {
                brandName: 'Haldo for: ',
                features: ['Magic', 'free', 'furry']
              },
              BMW: {
                brandName: 'Maldo for: ',
                features: ['lovely']
              },
              Mercedes: {
                brandName: 'Baldo for',
                features: ['twirling', 'tasty']
              },
              Volvo: {
                brandName: 'Marioldo for',
                features: ['bar', 'foo', 'zio']
              }
            }
            var x = document.getElementById("mySelect").value;
            document.getElementById("demo").innerHTML = `${messages[x].brandName} ${x}`;


            let ul = document.getElementById("list")

            ul.innerHTML = '';
            for (let feat of messages[x].features) {
              console.log(feat)
              var li = document.createElement('li');
              li.innerHTML = feat;
              ul.appendChild(li);
            }



          }
          myFunction();

        </script>

      </body>

    </html>

【讨论】：

非常感谢分享这个，我想你明白我的意思了，但是问题是：假设奥迪是默认选择选项，如何默认打印文本？
用myFunction();声明后运行函数就足够了。我会更新我的答案。
伙计，你是一个救生员，真的非常感谢，不过最后一件事，我正在尝试将此设置用于我商店的产品变体详细信息，所以基本上我尝试插入产品详细信息
1. 标签，但该功能不适用于该变体，您能否告诉我如何使用您的设置来描述每个产品的要点？
所以基本上如果我选择奥迪 > 我会得到以下信息：1. 德国汽车 2. 柴油 3. 200 HP 等，这里的重点是我希望使用项目符号对细节进行排序，每行一个细节@AITheLazyMonkey
我认为您的意思是使用

【解决方案3】：

您可以制作随机文本的字符串数组。

【讨论】：

我该怎么做？