Различный внутренний HTML выход для выбранного значения Javascript - PullRequest
Новая
       1

Различный внутренний HTML выход для выбранного значения Javascript

0 голосов
/ 11 марта 2020

Итак, в основном я хочу создать скрытый абзац, и при выборе каждого значения скрытый абзац показывает настраиваемый текст, который я настроил для каждого значения. Таким образом, в основном, если я выбираю Audi, я хочу набрать: Случайный текст / для BMW> Независимо от / Mercedes> автомобиль,

Весь смысл в том, чтобы настроить отображаемый текст для каждого выбранного значения

Абсолютно необходимо так что любая помощь более чем ценится! 

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

Ответы [ 3 ]

1 голос
/ 11 марта 2020

Я не уверен, что понял ваш вопрос, но я думаю, что это возможное решение: 

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

Я создаю JSON с n ключами со значением единственной опции выбора и использую значение select like selector для получения строки, присвоенной ключу 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>
1 голос
/ 11 марта 2020

Как насчет добавления атрибута данных со случайными данными, что-то вроде: 

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

Таким образом, вы можете хранить данные вместе с опциями, поэтому вам не нужно отслеживать их в другом месте.

0 голосов
/ 11 марта 2020

Вы можете создавать массивы строк из случайных текстов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...