Блог

Главная - Вопросы по программированию - Как мне создать заполнитель для поля выбора, который имеет значения в javascript?

Как мне создать заполнитель для поля выбора, который имеет значения в javascript?

#javascript #html #css

#javascript #HTML #css — код

Вопрос:

и в настоящее время сталкиваюсь с этой проблемой. Итак, у меня есть select поле в Html, из которого оно values получено JS , и, похоже, я не могу сделать поле выбора заполнителем. Я перепробовал все другие варианты, с которыми люди, у которых возникли проблемы при переполнении стека, могут кто-нибудь помочь? Мне просто нужен заполнитель для поля выбора, где он отображается, в виде текста вместо черного поля выбора в начале

 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>'); 
 <select id="rank1"     class="calcInput" onchange="getval(this);">  </select>
<select id="devision1" class="calcInput" onchange="getval2(this);"> </select>
<select id="rank"      class="calcInput" onchange="getval3(this);"> </select>
<select id="devision"  class="calcInput" onchange="getval4(this);"> </select>

Ответ №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>

Ответ №2:

Добавьте что-то вроде этого в каждое из ваших полей выбора

  <label for="rank1">Rank1:</label>
 <select id="rank1" class="calcInput" onchange="getval(this);">
     <option value="">--Select rank--</option>
 </select>

И добавить вместо замены

 inputField1.rank1.innerHTML  = 
...
Метки: