Question

我正在尝试用Vanilla JS替换输入框。目前，我正在使用jquery来做到这一点。

column.replaceWith("<select id='" + column[0].id + "' name='" + column[0].id + "' class='" + column[0].className + "'></select>");

我将所有代码重构为Vanilla JS，这是我要做的最后一件事。我已经完成了document.createElement（'select'）;然后创建<select></select>元素。然后我尝试做；

newEl.innerHTML += '<select id="selBidReceivedIsPM" name="selBidReceivedIsPM">'
                + '<option value="0">AM</option>'
                + '<option value="1">PM</option>';

，但这不会创建ID或名称。在过去的3个小时里，我一直在使用Google搜索和尝试功能，并且需要一些帮助来解决这个问题。

html：

 <label for="columnA5"></label>
 <input
       type="number"
       id="columnA5"
       name="columnA5"
       class="columnA"
       step="any"
 >

Answer 1

类似的事情应该可以用来创建带有具有value和innerHTML选项的select。

var select = document.createElement('select');
select.id="selBidReceivedIsPM" 
select.name="selBidReceivedIsPM"
var val=2;
var time=["AM","PM"];
for (var i = 0; i<val; i++){
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = time[i];
    select.appendChild(opt);
}
console.log(select)

Answer 2

我认为，如果DOM元素不是由javascript创建而是呈现的，则您无法“删除”该元素（在您的情况下为input type="number"...）。

您可以通过“隐藏” input并将其select放置在“他的”位置上来“替换”它。

有一个例子，尝试一下：

function replaceEle() {
  var txt=document.getElementById('columnA5');
  /*
   or You can use querySelectorAll :
   var txt=document.querySelectorAll('input[type="number"]');
   then You'll get all textboxes in page, and then You have to use for loop
  */
  var sel=document.createElement('select'); //create select element
  sel.id='selBidReceivedIsPM';
  sel.setAttribute('onchange','alert(this.value)'); 
  /*show selected value, or instead alert You can type some JS
    function, what gonna do when option is changed */
  var opt=document.createElement('option'); //create option element
  opt.value=0;opt.innerHTML='AM';
  sel.appendChild(opt); //add option element into select element
  opt=document.createElement('option');
  opt.value=1; opt.innerHTML='PM';
  sel.appendChild(opt);
  sel.selectedIndex=0; //set default selected value
  txt.style.display='none'; //hide input element
  txt.parentNode.insertBefore(sel, txt); //insert select element just before input, 
  
}

<input type="number" id="columnA5" value=""/><br>
<input type="button" value="Replace it" onclick="replaceEle();"/>

如何在Vanilla JS中使用下拉菜单替换输入框

2 个答案: