Как установить выпадающий список выбора значения в javascript через getElementByClassName или querySelector без идентификатора - PullRequest
Новая
       36

Как установить выпадающий список выбора значения в javascript через getElementByClassName или querySelector без идентификатора

1 голос
/ 01 апреля 2020

Я пытаюсь установить выпадающий список выбора значения в javascript. У меня выпадающий список, как показано ниже: 

<div class="gender_option" id="create">
    <span class="value">
        <select name="account" class="select-gender">
            <option value="Unknown">Please select</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
    </span>
</div>

Во-первых, я попробовал getElementByClassName. Я искал много вопросов-ответов в stackoverflow и применил, но он снова не работает. Код ниже является одним из них. Код выдает ошибку как undefined options. Я изменил опцию вместо опций, но все еще не работает. 

var e = document.getElementsByClassName('select_gender');
e[1].options[e[1].selectedIndex].selected=true;

Я изучил и применил множество решений, как следующие объяснения: Установите значение элемента по имени класса, не имея ID элемента Как определить значение выбранного параметра раскрывающегося списка, используя getElementsByClassName?

Также я нашел выборку запроса, я попробовал следующий код, который не работает. 

var selectElement = document.querySelector('.select_gender');
var output1 = selectElement.options[selectElement.selectedIndex].value;

for (var j=0; j<output1.length; j++) {
    if (radioElements[i].getAttribute('value') == 'MALE') {
         output1[j].selected=true;
    }
}

Как установить выбранное значение в javascript без параметра id

Ragards,

Ответы [ 2 ]

1 голос
/ 01 апреля 2020

var selectElement = document.querySelector('.select_gender'); содержит опечатку: .select_gender должно быть .select-gender. Вот почему e[1].options[e[1].selectedIndex].selected=true; выдает ошибку.

В любом случае, вы можете использовать этот css селектор , чтобы установить выбранную опцию селектора на определенную опцию (например, Мужской) 

document.querySelector(".select-gender option[value='Male']").selected = true;

// now selectedIndex (of the *selector*) is 1
console.log(document.querySelector(".select-gender").selectedIndex);

// and its value = "Male"
console.log(document.querySelector(".select-gender").value);

document.querySelector("button").addEventListener("click", setSelectorToFemale);

// set by finding the desired option
// not very practical, just to demo
function setSelectorToFemale() {
  const desiredValue = "Female";
  const foundOption = [...document.querySelectorAll(".select-gender option")]
  //             ^ spread ElementList to Array
    .find(o => o.value === desiredValue);
  //             ^ only option with value desiredValue
  if (foundOption) {
    foundOption.selected = true;
  }
}
<div class="gender_option" id="create">
    <span class="value">
        <select name="account" class="select-gender">
            <option value="Unknown">Please select</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
    </span>
    <button>Select Female</button>
</div>
0 голосов
/ 01 апреля 2020

теперь это будет работать, но нужно спросить, зачем вы это делаете? Если вы выберите значение, оно станет истинным само по себе 

function myFunction(){
var e = document.getElementsByClassName("select-gender");
e[0].options[e[0].selectedIndex].selected=true;

console.log(e[0].options);

console.log(e[0]);
}
<div class="gender_option" id="create">
    <span class="value">
        <select name="account" class="select-gender" onchange='myFunction()'>
            <option value="Unknown">Please select</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
    </span>
</div>
...