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

Question

并且目前正面临这个问题。所以我在 Html 中有一个Box，它从select获取它，但我似乎无法让选择框成为占位符。我已经尝试了所有其他选项，我们在堆栈溢出中遇到麻烦有人可以帮忙吗？我只需要一个占位符来显示选择框，作为文本而不是开头的黑色选择框valuesJS

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 } 

    } 

  , 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 clue

const

    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 =&nbsp;&nbsp; &nbsp; { iron&nbsp; &nbsp; : { '1':&nbsp; &nbsp;0, '2':&nbsp; 11, '3':&nbsp; 19 }&nbsp;&nbsp; &nbsp; , bronze&nbsp; : { '1':&nbsp; 28, '2':&nbsp; 42, '3':&nbsp; 56 }&nbsp;&nbsp; &nbsp; , silver&nbsp; : { '1':&nbsp; 69, '2':&nbsp; 85, '3': 102 }&nbsp;&nbsp; &nbsp; , gold&nbsp; &nbsp; : { '1': 118, '2': 140, '3': 161 }&nbsp;&nbsp; &nbsp; , plat&nbsp; &nbsp; : { '1': 182, '2': 211, '3': 240 }&nbsp;&nbsp; &nbsp; , diamond : { '1': 276, '2': 311, '3': 351 }&nbsp;&nbsp; &nbsp; , imortal : { '1': 406, '2': 499, '3': 591 }&nbsp;&nbsp; &nbsp; };const myForm = document.forms['my-form']&nbsp; ;function setSelect( xSlct, arr )&nbsp; {&nbsp; xSlct.innerHTML = '' // clear all options&nbsp; let ph = new Option(xSlct.dataset.placeholder , '', true, true )&nbsp; xSlct.add( ph )&nbsp; arr.forEach(el => xSlct.add(new Option( el , el )) )&nbsp; ph.disabled = true&nbsp; }setSelect( myForm.rank1, Object.keys(currentRank))setSelect( myForm.devision1, Object&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .values(currentRank)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .map(Object.keys)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .flat()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .filter((v,i,t)=>t.indexOf(v)===i))<form action="xxx" name="my-form" >&nbsp; <select name="rank1" data-placeholder="<< Rank >>"></select>&nbsp; <select name="devision1" data-placeholder="<< Devision >>"></select></form>

Answer 2

将类似的内容添加到您选择的每个字段中&nbsp;<label for="rank1">Rank1:</label>&nbsp;<select id="rank1" class="calcInput" onchange="getval(this);">&nbsp; &nbsp; &nbsp;<option value="">--Select rank--</option>&nbsp;</select>并追加而不是替换inputField1.rank1.innerHTML +=&nbsp;...