Как связать select и input text

201

04 августа 2021, 14:10

Есть примерно такая структура.Как можно сделать,чтобы выбор option прописывался в input? Допустим,стоит инпут,возле него селект,допустим,пользователь выбрал option 169 (Российская федерация),и нужно чтобы значение ячейки (в случае с option 169 - Российская федерация) прописалось в инпут (value).И так со всеми остальными,то есть если выбрал допустим "Австрия",то чтобы в инпут (value) прописался "Австрия" и т.д.Как это можно реализовать? Если надо,список можно укоротить

Answer 1

думаю так вы хотели.

function update(e, targetId) { 
  let target = document.getElementById(targetId); 
  let ob = e.options[e.selectedIndex] 
  target.value = `${ob.value} - ${ob.text}` 
}

<input id="bdF17" class="manFlOth3" value="" name="sa3" maxlength="100" type="text"> 
 
<select class="manFlaCountry" id="siF6" name="country" onchange="update(event.target, 'bdF17')"> 
  <option value="148" selected class="top">Нидерланды</option> 
  <option value="169" class="top">Российская Федерация</option> 
  <option value="204" class="top">Украина</option> 
  <option value="31" class="top">Беларусь</option> 
  <option value="111" class="top">Казахстан</option> 
  <option value="12">Австралия</option> 
  <option value="11">Австрия</option> 
  <option value="14">Азербайджан</option> 
  <option value="5">Албания</option> 
  <option value="55">Алжир</option> 
  <option value="10">Американское Самоа</option> 
  <option value="221">Ангилья</option> 
  <option value="94">Английская Индийская Океаническая Территория</option> 
  <option value="8">Ангола</option> 
  <option value="1">Андорра</option> 
  <option value="222">Антарктика</option> 
  <option value="4">Антигуа и Барбуда</option> 
  <option value="7">Антильский Остров Нидерландов</option> 
  <option value="186">Арабская Республика Суринам</option> 
  <option value="9">Аргентина</option> 
  <option value="6">Армения</option> 
  <option value="13">Аруба</option> 
  <option value="3">Афганистан</option> 
  <option value="28">Багамский Остров</option> 
  <option value="17">Бангладеш</option> 
  <option value="16">Барбадос</option> 
  <option value="21">Бахрейн</option> 
  <option value="32">Белиз</option> 
  <option value="18">Бельгия</option> 
  <option value="23">Бенин</option> 
  <option value="20">Болгария</option> 
  <option value="26">Боливия</option> 
  <option value="15">Босния и Герцеговина</option> 
  <option value="30">Ботсвана</option> 
  <option value="27">Бразилия</option> 
  <option value="25">Бруней</option> 
  <option value="19">Буркина Фасо</option> 
  <option value="22">Бурунди</option> 
  <option value="29">Бутан</option> 
  <option value="215">Вануату</option> 
  <option value="209">Ватикан</option> 
  <option value="69">Великобритания</option> 
  <option value="89">Венгрия</option> 
  <option value="211">Венесуэла</option> 
  <option value="212">Виргинские острова (UK)</option> 
  <option value="195">Восточный Тимор</option> 
  <option value="214">Вьетнам</option> 
  <option value="68">Габон</option> 
  <option value="88">Гаити</option> 
  <option value="84">Гайана</option> 
  <option value="76">Гамбия</option> 
  <option value="73">Гана</option> 
  <option value="78">Гваделупа</option> 
  <option value="81">Гватемала</option> 
  <option value="77">Гвинея</option> 
  <option value="83">Гвинея-Бисау</option> 
  <option value="50">Германия</option> 
  <option value="235">Гернси и Олдерни</option> 
  <option value="74">Гибралтар</option> 
  <option value="85">Гонг-Конг</option> 
  <option value="86">Гондурас</option> 
  <option value="70">Гренада</option> 
  <option value="75">Гренландия</option> 
  <option value="80">Греция</option> 
  <option value="71">Грузия</option> 
  <option value="52">Дания</option> 
  <option value="34">Дем. республика Конго</option> 
  <option value="51">Джибути</option> 
  <option value="53">Доминика</option> 
  <option value="54">Доминиканская Республика</option> 
  <option value="58">Египет</option> 
  <option value="59">Еритреа</option> 
  <option value="219">Замбия</option> 
  <option value="220">Зимбабве</option> 
  <option value="92">Израиль</option> 
  <option value="93">Индия</option> 
  <option value="90">Индонезия</option> 
  <option value="100">Иордания</option> 
  <option value="95">Ирак</option> 
  <option value="96">Иран</option> 
  <option value="91">Ирландия</option> 
  <option value="97">Исландия</option> 
  <option value="60">Испания</option> 
  <option value="98">Италия</option> 
  <option value="217">Йемен</option> 
  <option value="47">Кабо Верде</option> 
  <option value="110">Каймановы острова</option> 
  <option value="104">Камбоджа</option> 
  <option value="41">Камерун</option> 
  <option value="33">Канада</option> 
  <option value="166">Катар</option> 
  <option value="102">Кения</option> 
  <option value="48">Кипр</option> 
  <option value="105">Кирибати</option> 
  <option value="42">Китай</option> 
  <option value="43">Колумбия</option> 
  <option value="106">Комморские острова</option> 
  <option value="36">Конго</option> 
  <option value="108">Корея</option> 
  <option value="44">Коста Рика</option> 
  <option value="38">Кот Д'ивуар</option> 
  <option value="46">Куба</option> 
  <option value="109">Кувейт</option> 
  <option value="103">Кыргызстан</option> 
  <option value="112">Лаос</option> 
  <option value="121">Латвия</option> 
  <option value="118">Лесото</option> 
  <option value="117">Либерия</option> 
  <option value="113">Ливан</option> 
  <option value="122">Ливийская Арабская республика Джамахирия</option> 
  <option value="119">Литва</option> 
  <option value="115">Лихтенштейн</option> 
  <option value="120">Люксембург</option> 
  <option value="137">Маврикий</option> 
  <option value="135">Мавритания</option> 
  <option value="126">Мадагаскар</option> 
  <option value="132">Макао</option> 
  <option value="128">Македония</option> 
  <option value="139">Малави</option> 
  <option value="141">Малайзия</option> 
  <option value="129">Мали</option> 
  <option value="138">Мальдивы</option> 
  <option value="136">Мальта</option> 
  <option value="123">Марокко</option> 
  <option value="134">Мартиника</option> 
  <option value="127">Маршалловы острова</option> 
  <option value="140">Мексика</option> 
  <option value="142">Мозамбик</option> 
  <option value="125">Молдова</option> 
  <option value="124">Монако</option> 
  <option value="131">Монголия</option> 
  <option value="229">Монтсеррат</option> 
  <option value="130">Мьянмар</option> 
  <option value="143">Намибия</option> 
  <option value="151">Науру</option> 
  <option value="150">Непал</option> 
  <option value="145">Нигер</option> 
  <option value="146">Нигерия</option> 
  <option value="147">Никарагуа</option> 
  <option value="231">Ниуэ</option> 
  <option value="152">Новая Зеландия</option> 
  <option value="144">Новая Каледония</option> 
  <option value="149">Норвегия</option> 
  <option value="2">Объединенные Арабские Эмираты</option> 
  <option value="153">Оман</option> 
  <option value="237">Остров Святой Елены</option> 
  <option value="39">Острова Кука</option> 
  <option value="233">Острова Уоллис и Футуна</option> 
  <option value="66">Острова Фару</option> 
  <option value="159">Пакистан</option> 
  <option value="164">Палау</option> 
  <option value="162">Палестинская Территория</option> 
  <option value="154">Панама</option> 
  <option value="157">Папуа Новая Гвинея</option> 
  <option value="165">Парагвай</option> 
  <option value="155">Перу</option> 
  <option value="160">Польша</option> 
  <option value="163">Португалия</option> 
  <option value="167">Реюнион</option> 
  <option value="170">Руанда</option> 
  <option value="168">Румыния</option> 
  <option value="216">Самоа</option> 
  <option value="180">Сан-Марино</option> 
  <option value="184">Сан-Томе и Принсипи</option> 
  <option value="171">Саудовская Аравия</option> 
  <option value="187">Свазиленд</option> 
  <option value="210">Святого Винсента и Гренадины</option> 
  <option value="107">Святой Киттс и Невис</option> 
  <option value="236">Северная Корея</option> 
  <option value="173">Сейшелы</option> 
  <option value="181">Сенегал</option> 
  <option value="114">Сент-Люсия</option> 
  <option value="45">Сербия</option> 
  <option value="176">Сингапур</option> 
  <option value="178">Словакия</option> 
  <option value="177">Словения</option> 
  <option value="206">Соединенные Штаты</option> 
  <option value="172">Соломоновы острова</option> 
  <option value="182">Сомали</option> 
  <option value="174">Судан</option> 
  <option value="183">Суринам</option> 
  <option value="179">Сьерра-Леоне</option> 
  <option value="193">Таджикистан</option> 
  <option value="192">Таиланд</option> 
  <option value="202">Тайвань</option> 
  <option value="194">Такелау</option> 
  <option value="203">Танзания</option> 
  <option value="191">Того</option> 
  <option value="198">Тонга</option> 
  <option value="200">Тринидад и Тобаго</option> 
  <option value="201">Тувалу</option> 
  <option value="197">Тунис</option> 
  <option value="196">Туркменистан</option> 
  <option value="199">Турция</option> 
  <option value="205">Уганда</option> 
  <option value="208">Узбекистан</option> 
  <option value="207">Уругвай</option> 
  <option value="65">Федеративные Штаты Микронезия</option> 
  <option value="63">Фиджи</option> 
  <option value="158">Филиппины</option> 
  <option value="62">Финляндия</option> 
  <option value="64">Фолклендские острова</option> 
  <option value="67">Франция</option> 
  <option value="72">Французская Гвиана</option> 
  <option value="156">Французская Полинезия</option> 
  <option value="87">Хорватия</option> 
  <option value="35">Центральная Африканская Республика</option> 
  <option value="189">Чад</option> 
  <option value="228">Черногория</option> 
  <option value="49">Чешская Республика</option> 
  <option value="40">Чили</option> 
  <option value="37">Швейцария</option> 
  <option value="175">Швеция</option> 
  <option value="116">Шри-Ланка</option> 
  <option value="56">Эквадор</option> 
  <option value="79">Экваториальная Гвинея</option> 
  <option value="185">Эль Сальвадор</option> 
  <option value="57">Эстония</option> 
  <option value="61">Эфиопия</option> 
  <option value="218">Южная Африка</option> 
  <option value="99">Ямайка</option> 
  <option value="101">Япония</option> 
</select>

function update(e, targetId) { 
  let target = document.getElementById(targetId); 
  let ob = e.options[e.selectedIndex] 
  target.value = `${ob.value} - ${ob.text}` 
}

function update(e, targetId) { 
  let target = document.getElementById(targetId); 
  let ob = e; 
  target.value = `${ob.value} - ${ob.id}` 
}

<input id="bdF17" class="manFlOth3" value="" name="sa3" maxlength="100" type="text"> 
 
<div> 
  <input type="radio" onchange="update(event.target, 'bdF17')" id="contactChoice1" name="contact" value="email"> 
  <label for="contactChoice1">Email</label> 
 
  <input type="radio" onchange="update(event.target, 'bdF17')" id="contactChoice2" name="contact" value="phone"> 
  <label for="contactChoice2">Phone</label> 
 
  <input type="radio" onchange="update(event.target, 'bdF17')" id="contactChoice3" name="contact" value="mail"> 
  <label for="contactChoice3">Mail</label> 
</div>