Question

我有一个选择，我需要为没有onclick功能的选定设置validatoin。因此，如果我选择了医疗保健，我可以在不点击按钮的情况下在内部编写段落信息。

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

Answer 1

尝试使用jquery事件并使用

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

    }
});
</script>

Answer 2

以下是纯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>

Answer 3

您也可以使用普通的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;
  }
};

Answer 4

您可以这样做：

＆＃13;

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.';
}

＆＃13;

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

＆＃13;

选择没有按钮的值

4 个答案: