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

Question

Я создаю меню ввода для выбора телефона, в котором есть поля <select> и <input>, как показано ниже:

<select id="country">
    <option data-countryCode="IN" value="91">India</option>
    <option data-countryCode="US" value="1">US</option>
    <option data-countryCode="GB" value="44">UK</option>
</select>

<input type="tel" placeholder ="956 826 4457" id="tel">

JS код:

 const select = document.querySelector('#country');
    const tel = document.getElementById('tel')
        tel.value = `${select.options[select.selectedIndex].value}` +`${tel.value}`

Как объединить / объединить значение select с полем input, а также отобразить все вместе в этом поле ввода.

Answer 1

Прежде всего в предоставленном вами коде есть некоторые странные подробности.

<select id-"country"> 

предполагается равным

<select id="country">

?

почему вы объединяете шаблоны с плюсом, используя шаблоны одновременно? Разве недостаточно просто использовать

tel.value = ${select.options[select.selectedIndex].value}${tel.value}

?

Кроме того, какое событие вы собираетесь использовать ? Если мы выбираем страну в первый раз, она работает хорошо, добавляя, например, «91». Но в следующий раз (если мы случайно выбрали не ту страну) он снова добавит код.

Что касается проблемы, не могли бы вы дать более подробное объяснение того, что происходит сейчас точно

Answer 2

Вы можете сделать что-то вроде этого

const select = document.querySelector('#country');
const tel = document.getElementById('tel');
let prevVal = select.value; // storing previous value of select

// this block will be exected on init of code
if(tel.value) tel.value = `${select.value}${tel.value}`;
else tel.placeholder = `${select.value}${tel.placeholder}`;

// adding event on changing input
tel.addEventListener('change', ({ target }) => {
  const reg = new RegExp(`(^${prevVal} )`);
  // checking do we already have country code
  if (reg.test(target.value)) tel.value = tel.value.replace(reg, target.value);
  else tel.value = `${select.value}${target.value}`;
});

// adding event on changing select
select.addEventListener('change', ({ target }) => {
  const reg = new RegExp(`(^${prevVal})`);
  if(tel.value) tel.value = `${target.value}${tel.value.replace(reg, '')}`;
  else tel.placeholder =  tel.placeholder.replace(reg, target.value);
  prevVal = target.value;
});

<select id="country">
    <option data-countryCode="IN" value="91" selected>India</option>
    <option data-countryCode="US" value="1">US</option>
    <option data-countryCode="GB" value="44">UK</option>
</select>

<input type="tel" placeholder ="956 826 4457" id="tel">

Answer 3

Проблема в том, что вы поставили знак «-» вместо знака «=» в первой строке. Это должно быть:

<select id="country">

Кроме того, почему вы использовали jQuery? Javascript покрывает это так же легко:

const select = document.getElementById('country');
const tel = document.getElementById('tel');
tel.value = select.options[select.selectedIndex].value + tel.value;