如何为具有 JavaScript 值的选择框制作占位符？

Question

并且目前正面临这个问题。所以我在 Html 中有一个Box，它从select获取它，但我似乎无法让选择框成为占位符。我已经尝试了所有其他选项，我们在堆栈溢出中遇到麻烦有人可以帮忙吗？我只需要一个占位符来显示选择框，作为文本而不是开头的黑色选择框valuesJSvar currentRank =     { iron    : { '1':   0, '2':  11, '3':  19 }     , bronze  : { '1':  28, '2':  42, '3':  56 }     , silver  : { '1':  69, '2':  85, '3': 102 }     , gold    : { '1': 118, '2': 140, '3': 161 }     , plat    : { '1': 182, '2': 211, '3': 240 }     , diamond : { '1': 276, '2': 311, '3': 351 }     , imortal : { '1': 406, '2': 499, '3': 591 }     }   , desiredRank =     { iron    : { '1':   0, '2':  11, '3':  19 }     , bronze  : { '1':  28, '2':  42, '3':  56 }     , silver  : { '1':  69, '2':  85, '3': 102 }     , gold    : { '1': 118, '2': 140, '3': 161 }     , plat    : { '1': 182, '2': 211, '3': 240 }     , diamond : { '1': 276, '2': 311, '3': 351 }     , imortal : { '1': 406, '2': 499, '3': 591 }     , radiant : { '1': 750, '2': 750, '3': 750 }     }  ;Array.prototype.unique = function() {  const resArr = [];  this.forEach(entry => {    if(resArr.indexOf(entry) == -1) resArr.push(entry);  })  return resArr;};document.getElementById('rank1')//still have no clueconst    inputField1 =      { rank1     : document.getElementById('rank1')      , devision1 : document.getElementById('devision1')      }  , inputFields =       { rank     : document.getElementById('rank')      , devision : document.getElementById('devision')      }  ;inputField1.rank1.innerHTML =   Object.keys(currentRank)    .reduce((options, option) =>      options += `<option value="${option}">${option}</option>`,'<option value="" selected disabled></option>');inputField1.devision1.innerHTML =  Object.values(currentRank)    .map(entry =>      Object.keys(entry))        .flat()        .unique()        .reduce((options, option) =>           options+=`<option value="${option}">${option}</option>`,'<option value="" selected disabled></option>');

Answer 1

你可以这样做：（？）

var currentRank = 

    { iron    : { '1':   0, '2':  11, '3':  19 } 

    , bronze  : { '1':  28, '2':  42, '3':  56 } 

    , silver  : { '1':  69, '2':  85, '3': 102 } 

    , gold    : { '1': 118, '2': 140, '3': 161 } 

    , plat    : { '1': 182, '2': 211, '3': 240 } 

    , diamond : { '1': 276, '2': 311, '3': 351 } 

    , imortal : { '1': 406, '2': 499, '3': 591 } 

    };

const myForm = document.forms['my-form']

  ;

function setSelect( xSlct, arr )

  {

  xSlct.innerHTML = '' // clear all options

  let ph = new Option(xSlct.dataset.placeholder , '', true, true )

  xSlct.add( ph )

  arr.forEach(el => xSlct.add(new Option( el , el )) )

  ph.disabled = true

  }

setSelect( myForm.rank1, Object.keys(currentRank))

setSelect( myForm.devision1, Object

                          .values(currentRank)

                          .map(Object.keys)

                          .flat()

                          .filter((v,i,t)=>t.indexOf(v)===i))

<form action="xxx" name="my-form" >

  <select name="rank1" data-placeholder="<< Rank >>"></select>

  <select name="devision1" data-placeholder="<< Devision >>"></select>

</form>

Answer 2

将类似的内容添加到您选择的每个字段中

 <label for="rank1">Rank1:</label>

 <select id="rank1" class="calcInput" onchange="getval(this);">

     <option value="">--Select rank--</option>

 </select>

并追加而不是替换

inputField1.rank1.innerHTML += 

...