Question

现有HTML代码

<select id="city_name" name="user[city]" class="form-control">
      <option>Option1</option>
      <option>Option2</option>
      <option>Option3</option>
      <option>Option4</option>
      <option>Option5</option>
</select>

应更改为

<select id="city_name" name="user[city]" class="form-control">
      <option>New Option 1</option>
      <option>New Option 2</option>
</select>

我正在使用下面的代码，但它无法正常工作

document.getElementById("city_name").innerHTML = document.getElementById("city_name").innerHTML.replace(/<([^>]+?)([^>]*?)>(.*?)<\/\1>/ig,'<select id=\"city_name\" name=\"user[city]\" class=\"form-control\"><option>Testing<\/option><\/select>');

请帮忙

提前致谢

Answer 1

document.getElementById("city_name").innerHTML = '<option>New Option 1</option> <option>New Option 2</option> ';

或者你可以这样写：

$("#city_name").html('<option>New Option 1</option> <option>New Option 2</option>');

Answer 2

也许就是这样？

document.getElementById("city_name").innerHTML =
document.getElementById("city_name").innerHTML
  .replace(new RegExp('>Option', 'g'), '>New Option ');

Answer 3

＆＃13;

$("#changelist").on('click', function(e) {
  $("#city_name").html("<option>New Option 1</option><option>New Option 2</option>");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="city_name" name="user[city]" class="form-control">
  <option>Option1</option>
  <option>Option2</option>
  <option>Option3</option>
  <option>Option4</option>
  <option>Option5</option>
</select>
<button id='changelist'>
  Click me!
</button>

＆＃13;

Answer 4

您应该使用不同的ID，因此您的javascript将了解要选择的ID和要替换的ID：

<select id="id_baseCityName" name="user[city]" class="form-control">
      <option>Option1</option>
      <option>Option2</option>
      <option>Option3</option>
      <option>Option4</option>
      <option>Option5</option>
</select>

<select id="id_tobeReplacedCityName" name="user[city]" class="form-control">
      <option>New Option 1</option>
      <option>New Option 2</option>
</select>


document.getElementById("id_baseCityName").innerHTML = document.getElementById("id_tobeReplacedCityName").innerHTML;

小提琴：https://jsfiddle.net/ducfilan/n73u56go/

Answer 5

只需将innerHTML替换为option

即可

function change(){
document.getElementById("city_name").innerHTML ='<option>New Option 1</option><option>New Option 2</option>';
  }

<select id="city_name" name="user[city]" class="form-control">
      <option>Option1</option>
      <option>Option2</option>
      <option>Option3</option>
      <option>Option4</option>
      <option>Option5</option>
</select>
<button onclick="change()">change</button>

Answer 6

您可以使用HTMLSelectElement#remove删除现有选项，HTMLSelectElement#add添加新选项：

Screen

var select = document.getElementById("city_name");

// Remove all existing options
while (select.length > 0) {
  select.remove(0);
}

// Set new options
var newValue = [
  'New Option 1',
  'New Option 2',
];
newValue.forEach(function(value) {
  var option = document.createElement('option');
  option.text = value;
  select.add(option);
});

Answer 7

const $select = document.querySelector('#city_name');

// Remove existing options
while( $select.hasChildNodes() ){
  $select.removeChild( $select.childNodes[0] );
}

$select.appendChild(newOptionElem('New Option 1'));
$select.appendChild(newOptionElem('New Option 2'));

function newOptionElem(txt){
  let $elem = document.createElement('option'),
      textNode = document.createTextNode(txt);
  
  $elem.appendChild(textNode);
  return $elem;
}

<select id="city_name" name="user[city]" class="form-control">
      <option>Option1</option>
      <option>Option2</option>
      <option>Option3</option>
      <option>Option4</option>
      <option>Option5</option>
</select>

如何使用JavaScript将新下载列表替换为下拉菜单

7 个答案: