Выберите значение без кнопки

Question

Выберите значение без кнопки

1

У меня есть выбор, и мне нужно установить validatoin для выбранного без функции onclick. Поэтому, если я выбрал Healthcare, я могу сделать innerHTML информацией в параграфе, не нажимая на кнопку.

<select name="industry" id="industry">
    <option value="none"> </option>
    <option value="1">Healthcare</option>
    <option value="2">Mining</option>
    <option value="3">Power</option>
    <option value="4">Audit</option>
    <option value="5">Accounting</option>
    <option value="6">IT</option>
    <option value="7">Telecommunications</option>
    <option value="8">Justice</option>
    <option value="9">Insurance</option>
    <option value="10">International Organizations/Embassies</option>
    <option value="100">Other</option>
</select>

Anna 20 сен. 2017, в 21:41

Источник

Теги:

javascript

select

validation

4 ответа

0

Вы можете сделать это так:

document.querySelector('#ice-cream').onchange = changeEventHandler;

function changeEventHandler(event) {
  const span = document.querySelector('#text');   
  if (!event.target.value) span.innerHTML = 'Please Select One';   
  else span.innerHTML = 'You like ' + event.target.value + ' ice cream.';
}

<label>Choose an ice cream flavor:
    <select id="ice-cream" name="ice-cream">
        <option value="">Select One</option>
        <option value="chocolate">Chocolate</option>
        <option value="strawberry">Strawberry</option>
        <option value="vanilla">Vanilla</option>
    </select>
</label>
<br/>
<br/>
<span id="text"></span>

palaѕн 20 сен. 2017, в 17:48

0

Вы также можете использовать plain js для этого.

document.querySelector('select[name="industry"]').onchange=function(event){
    switch(event.target.value){
      case "1":
            document.querySelector("#paragraph").innerHTML = "Information to display"
    break;
    default:
            document.querySelector("#paragraph").innerHTML = "default message"
    break;
  }
};

Frederick Rosales 20 сен. 2017, в 16:37

0

Попробуйте использовать событие jquery и используйте

<script>
$(document).ready(function(){
    $("#industry").change(function(){ 
        //$("#paragraph_id").text("your text"); 
        // or $("#paragraph_id").append("your text");

    }
});
</script>

clearshot66 20 сен. 2017, в 15:53

0

я не знаю jquery так хорошо, поэтому я стараюсь не использовать его, что-нибудь еще, что я могу использовать в JS6?
Anna 20 сен. 2017, в 18:55
0

@ Анна, решение clearshot66 в порядке, но написано в jQuery. Если вы не в порядке с этой библиотекой, я добавил решение в чистом Javascript
Commercial Suicide 20 сен. 2017, в 18:58
0

JQuery меньше кода для того же эффекта. Все, что вам нужно сделать, это импортировать библиотеку и запустить ее на своей странице. Но чистый JS6 будет таким, как он сказал выше. Тот факт, что вы плохо это знаете, не означает, что учиться и брать что-то нехорошо :)
clearshot66 20 сен. 2017, в 18:59

Показать ещё 1 комментарий

Ещё вопросы

я не знаю jquery так хорошо, поэтому я стараюсь не использовать его, что-нибудь еще, что я могу использовать в JS6?
@ Анна, решение clearshot66 в порядке, но написано в jQuery. Если вы не в порядке с этой библиотекой, я добавил решение в чистом Javascript
JQuery меньше кода для того же эффекта. Все, что вам нужно сделать, это импортировать библиотеку и запустить ее на своей странице. Но чистый JS6 будет таким, как он сказал выше. Тот факт, что вы плохо это знаете, не означает, что учиться и брать что-то нехорошо :)

Commercial Suicide · Accepted Answer · 2017-09-20T17-15-00.000Z

Вот решение в чистом Javascript:

var select = document.getElementById('industry');
var p = document.getElementById('paragraph')

select.addEventListener('change', () => {
  p.innerHTML = select.options[select.selectedIndex].value;
})

<select name="industry" id="industry">
    <option value="none"> </option>
    <option value="1">Healthcare</option>
    <option value="2">Mining</option>
    <option value="3">Power</option>
    <option value="4">Audit</option>
    <option value="5">Accounting</option>
    <option value="6">IT</option>
    <option value="7">Telecommunications</option>
    <option value="8">Justice</option>
    <option value="9">Insurance</option>
    <option value="10">International Organizations/Embassies</option>
    <option value="100">Other</option>
</select>

<p id="paragraph"></p>