Question

所以我有以下输入字段，默认情况下是隐藏的。

当用户选择行业时，相应的字段应该是可见的。当然，如果选择更改，则前一个字段应切换回隐藏，并且新选择切换为显示。

我知道我可以在jquery中有一个条件来切换输入，即

if(selection == "SaaS") {
   $("#SaaSMeetings").show();
}

但是，我不知道如何才能让字段在每个字段上切换＃34;更改＆＃34;事件，基于下拉选择。

提前感谢您的帮助！

HTML

<label for="">Industry?</label>
    <select id="industry">
        <option value="Telesales">Telesales</option>
        <option value="Media">Media/Advertising</option>
        <option value="SaaS">SaaS</option>
        <option value="Insurance">Insurance</option>
        <option value="Automobile">Automobile</option>
    </select>

<!-- Show Metric Input based on Industry Selection -->

<input type="text" id="telesalesCalls" placeholder="How many calls?" style="display:none">
<input type="text" id="SaaSMeetings"  placeholder="How many meetings?" style="display:none">
<input type="text" id="MediaMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="InsuranceCalls" placeholder="How many calls?" style="display:none">

javascript：

$('#industry').on('change',function(){

  var selection = $(this).val(); 
  console.log("Detected change..." + selection);

  //TODO: Show the input field based on this selection, and on each change, make sure the correct field is displayed.
});

Answer 1

使用带有参数的.toggle()来显示隐藏决定：

 $("#SaaSMeetings").toggle($(this).val()=="SaaS");

完整代码：

$('#industry').on('change',function(){
  var selection = $(this).val(); 
  console.log("Detected change..." + selection);
  $("#SaaSMeetings").toggle($(this).val()=="SaaS");
});

Working Demo

Answer 2

只需隐藏所有内容，只显示所选内容即可。

$('#industry').on('change',function(){
   var elms = $('[placeholder^=How]');
   elms.hide().filter(function(){
       return this.id.toLowerCase().indexOf($(this).val().toLowerCase()) > -1;
   }).show();
});

我们使用$.fn.filter来过滤元素然后我们展示它，而其余的已经隐藏了。

Answer 3

使用switch语句，或更改您的选择选项值以匹配您的输入ID;

<option value="telesalesCalls">Telesales</option>
<input class="myInput" id="telesalesCalls" />

$('#industry').on('change',function(){
    var selection = $(this).val(); 
    console.log("Detected change..." + selection);

    $(".myInput").each(function(){
        $(this).hide();
    });

    $("#" + selection).show();
});

这是更长的切换方式：

switch(selection){
    case "Telesales":
        $("#telesalesCalls").show();
        $("#SaaSMeetings").hide();
        $("#MediaMeetings").hide();
        $("#InsuranceCalls").hide();
        break;
}

Answer 4

我会在输入字段上使用数据属性，以指示select元素中应该可见的值。

HTML

<label for="">Industry?</label>
    <select id="industry">
        <option value="Telesales">Telesales</option>
        <option value="Media">Media/Advertising</option>
        <option value="SaaS">SaaS</option>
        <option value="Insurance">Insurance</option>
        <option value="Automobile">Automobile</option>
    </select>

<!-- Show Metric Input based on Industry Selection -->

<input type="text" data-valueref="Telesales" id="telesalesCalls" placeholder="How many calls?" style="display:none">
<input type="text" data-valueref="SaaS" id="SaaSMeetings"  placeholder="How many meetings?" style="display:none">
<input type="text" data-valueref="Media" id="MediaMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" data-valueref="Insurance" id="InsuranceCalls" placeholder="How many calls?" style="display:none">

的Javascript

$('#industry').on('change',function(){
  // get the selected value
  var selection = $(this).val();
  // get all input fields that has a valueref attribute containing the selected value, and show them
  var showinputs = $('input[data-valueref~="' + selection + '"]').show();
  // hide all other input fields
  $('input').not(showinputs).hide();
});

这种方法实际上允许您为多个值显示单个输入。选择SaaS或保险时会显示以下内容

<input type="text" data-valueref="SaaS Insurance" id="InsuranceCalls" placeholder="How many calls?" style="display:none">

使用额外的类过滤输入字段可能是个好主意，以避免影响同一页面上的其他输入字段。

<input type="text" data-valueref="Insurance" id="InsuranceCalls" placeholder="How many calls?" class="valueref" style="display:none">

-

var showinputs = $('input.valueref[data-valueref~="' + selection + '"]').show();
$('input.valueref').not(showinputs).hide();

根据选择值切换输入字段 - jQuery和HTML

4 个答案:

Working Demo

HTML

的Javascript