Добавление новой опции для выбора меню

Это очень простая панель выбора. Почему это не работает?Добавление новой опции для выбора меню

<html> 
<form> 
    <label> 
     <select id="sel1"> 
      <option> op1 </option> 
      <option> op2 </option> 
      <option> op3 </option> 
     </select> 
     <input onclick="s()" type="submit" value=" ok! "> 
    </label> 
</form> 
<script> 
    function s(){ 
     document.getElementById("sel1").innerHTML += "<option> op4 </option>"; 
    } 
</script> 
</html>

Если я хочу, чтобы люди добавили новый вариант, мне нужно наложить на него какую-то переменную. Как добавить php-переменную вместо op4, op5 и т. Д.?

источник

2015-05-10 Sonoo

innerHTML заменит все в 'sel1' элемента, так что вы будете в конечном итоге, оны один вариант там .. – whatever

@whatever Не совсем, OP использует' + = '. – undefined

@Vohuman да право ... – whatever

Создайте фактический элемент option и добавьте его в элемент select.

var option = document.createElement("option"); 
option.value  = "op4"; 
option.innerHTML = "op4"; 

var select = document.getElementById("sel1"); 
select.appendChild(option);

Вы, вероятно, следует использовать value атрибутов в настройках тоже.

Это следующий вопрос. Затем, если я хочу, чтобы люди добавляли новый параметр, мне нужно наложить на него некоторую переменную php. как я могу добавить переменную php вместо op4, op5 и ... options?

Нет, это не имеет никакого отношения к PHP.

<input id="option-name">

Используя пример выше, вместо того чтобы использовать фиксированный "op4", использовать значение из входного

var input = document.getElementById("option-name"); 

var option = document.createElement("option"); 
option.value  = input.value; 
option.innerHTML = input.value; 

var select = document.getElementById("sel1"); 
select.appendChild(option);

Теперь значение входного сигнала будет использоваться в качестве имени/значения для нового параметра

источник

2015-05-10 19:23:15 naomik

Если мы рассмотрим и добавим ответы keewnn и vohuman на этот ответ, тогда этот ответ будет лучшим. tnx для всех. – Sonoo

Попробуйте это:

<script> 
    function s(){ 
     var o=new Option(); 
     o.value="<?php echo $option; ?>"; 
     o.text="<?php echo $option; ?>"; 
     var os=document.getElementById("sel1").options; 
     os[os.length]=o; 
    } 
</script>

источник

2015-05-10 19:25:46

У меня была ошибка в первой строке функции «Var o = new option();» и можете ли вы сказать мне, что можно сделать «os» в этом коде? – Sonoo

Опечатка: новая ** O ** ption с капиталом O –

Изменить это:

<input onclick="s()" type="submit" value=" ok! ">

Для этого:

<input onclick="s()" type="button" value=" ok! ">

Использование type="submit" приведет к вашей форме представляется и, таким образом, ваша страница перезагрузке. Использование type="button" предотвращает это.

источник

2015-05-10 19:32:22 keewnn

Происходит передача form, так как элемент form не имеет атрибута action, текущая страница перезагружается.

Вы должны прослушать событие submit и предотвратить действие события по умолчанию с использованием метода объекта события preventDefault.

document.querySelector('form').addEventListener('submit', function(event) { 
    event.preventDefault(); 
    var option = new Option('optionText', 'optionValue'); 
    document.getElementById("sel1").add(option); 
});

Другой вариант заключается в использовании button элемент с type атрибутом button вместо того, чтобы представить input.

источник

2015-05-10 19:33:01 undefined

Я, наконец, написал завершение Ответ. Двумя способами; Первый способ безопаснее другого. Первый способ:

<html> 
<form> 
    <label> 
     <input type="text" id="option-name"> 
     <select id="sel1"> 
      <option> Option1 </option> 
      <option> Option2 </option> 
      <option> Option3 </option> 
     </select> 
     <input onclick="s()" type="button" value=" Create ! "><br/><br/> 
    </label> 
</form> 
<script> 
    function s(){ 
     var input = document.getElementById("option-name"); 
     var option = document.createElement("option"); 
     option.value  = input.value; 
     option.innerHTML = input.value; 
     var select = document.getElementById("sel1"); 
     select.appendChild(option); 
    } 
</script> 
</html>

Это другие ребята отвечают тоже. Но второй способ проще и полезен. не более безопасный (я думаю, что innerhtml не так безопасен для этой цели, но если я ошибаюсь, скажите мне.)!

<html> 
<form method="post" action="index.php"> 
    <label> 
     <input type="text" name="txt1"> 
     <select id="sel1"> 
      <option> Option1 </option> 
      <option> Option2 </option> 
      <option> Option3 </option> 
     </select> 
     <input type="submit" value=" Create ! "> 
    </label> 
</form> 
<script> 
    document.getElementById("sel1").innerHTML += "<option><?php echo $_POST['txt1']; ?></option>"; 
</script>

источник

2015-05-10 23:39:44 Sonoo

Привет @Vohuman. Можете ли вы проверить мою вторую безопасность? Это безопасно? – Sonoo

Добавление новой опции для выбора меню

ответ

Смежные вопросы