를 주입 기존의 입력 필드는 자바 스크립트

Question

를 사용하여 옵션을 선택 할 수 I이 같은 기존 양식 필드 :

나는 HTML 코드를 변경하지 않고 옵션을 선택 필드를 변경하려는

<input id="register-city" type="text" name="city" class="input-block " aria-describedby="register-city-desc" aria-required="true" required="" value=""> 

.

register-city ID를 삽입하여 JavaScript로 어떻게이 작업을 수행 할 수 있습니까? 당신이 jQuery를 사용할 수 있는지 나는 당신이 그런 짓을 할 이유를 모르겠지만

<option>US</option> 
<option>UK</option> 

Answer 1

:

그래서 사용자가 페이지를 열 때, 입력 필드 같은 옵션으로 변경됩니다.

$('#register-city').remove(); 
$('body').append($('<select name="city"><option value="US">US</option><option value="UK">UK</option></select>')); 

https://jsfiddle.net/3h9us5u8/1/

Answer 2

이 같은 단일 입력하려는 경우는 "옵트 그룹"를 사용할 수 있습니다

-

Rendering a hierarchy of "OPTION"s in a "SELECT" tag

을 또는 당신이 좋아하는 계층 적 종속성을 만들 수 있습니다 -

var cities1 = "<option>city1</option><option>city2</option>"; 
 
var cities2 = "<option>city3</option><option>city4</option>"; 
 

 
$('#register-city').replaceWith('<select id="register-city"></select>'); 
 
var selectCountry = $('select#register-country'); 
 
$(selectCountry).on('change', function() { 
 
    if ($('#register-country').val() == 'US') { 
 
    $('#register-city').html(cities1); 
 
    } else if (selectCountry.val() == 'UK') { 
 
    $('#register-city').html(cities2); 
 
    } else { 
 
    $('#register-city').html(''); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select id="register-country"> 
 
    <option></option> 
 
    <option>US</option> 
 
    <option>UK</option> 
 
</select> 
 

 
<input id="register-city" type="text" name="city" class="input-block " aria-describedby="register-city-desc" aria-required="true" required="" value="" />