Как поженить 2 скрипта?

Question

Помогите чайнику)

Есть скрипт для поля ввода, которое служит поиском options в select.

Нужно его поженить с скриптом, который выведет отдельным полем описание каждой из options

<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.min.css">
</head>

<body>
  <div style="width:520px;margin:0px auto;margin-top:30px;">
    <select class="livesearch" style="width:400px;">
      <option value="0">---</option>
      <option value="1">Toyota</option>
      <option value="2">Nissan</option>
    </select>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.jquery.min.js"></script>
  <script type="text/javascript">
    $(".livesearch").chosen();
  </script>
</body>

</html>

Скрипт для вывода описания

<script type="text/javascript">  
var descr = new Array();  
descr[0] = 'Выберите машину';  
descr[1] = 'Описание Тойоты';  
descr[2] = 'Описание Ниссана';  
function catalog_rebuild(x)  
{  
    document.getElementById("mytext").innerHTML = descr[x];  
}  
</script>

Answer 1

Нужно его поженить с скриптом, который выведет отдельным полем описание каждой из options

Предложу такой вариант.

Отлавливается клик по странице и если он в пределах нужного списка, и на нужном нам элементе - вычисляется порядковый номер элемента списка. Потом выводится по нему информация...

var descr = [
  'Выберите машину',
  'Описание Тойоты',
  'Описание Ниссана'
]

document.querySelector('body').addEventListener('keyup', e => {
  if (e.key != 'Enter') return
  const ou = e.target.closest('.chosen-container')
  if (!ou) return
  setTimeout(_ => {
    const o = ou.querySelector('.result-selected')
    const i = o.dataset.optionArrayIndex
    if (i) catalog_rebuild(+i)
  }, 0)
})

document.querySelector('body').addEventListener('click', e => {
  const ou = e.target.closest('.chosen-results')
  if (!ou) return
  const o = e.target.closest('li')
  if (!o) return
  const i = $(ou).find('li').index(o)
  if (i > -1) catalog_rebuild(i)
})

function catalog_rebuild(x) {
  document.getElementById("mytext").innerHTML = descr[x];
}

<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.min.css">
</head>

<body>
  <div style="width:520px;margin:0px auto;margin-top:30px;">
    <select class="livesearch" style="width:400px;">
      <option value="0">---</option>
      <option value="1">Toyota</option>
      <option value="2">Nissan</option>
    </select>
  </div>

  <p id='mytext'></p>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.jquery.min.js"></script>
  <script type="text/javascript">
    $(".livesearch").chosen();
  </script>
</body>

</html>

БЛОГ НА HUSL

Как поженить 2 скрипта?

Ответы (1 шт):