javascript - 使用 JavaScript 注入(inject)现有输入字段以选择选项

Question

我有一个像这样的现有表单字段:

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

我想更改字段以选择选项而不更改 HTML 代码。

如何使用 JavaScript 通过注入(inject) register-city id 来完成此操作？

因此，当用户打开页面时，输入字段将更改为如下选项:

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

Answer 1

如果您想要这样的单个输入，您可以使用“opt groups” -

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="" />