使用JavaScript

Question

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

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

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

如何通过注入register-city id？

来使用JavaScript实现此目的

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

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

Answer 2

我不知道你为什么要做这样的事情但是如果你可以使用jquery。

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

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