选择带有其他选项的输入，在其旁边显示文本输入

Question

我正在尝试实现一个选择输入，其中包含'other'作为下拉选项之一。当选择“其他”时，我想在同一行显示强制文本输入。下面是我的规格的截图，以及我到目前为止所提供的一个小提琴。如果有人可以仔细检查我的html结构，并且还为输入框切换显示/隐藏提供jquery，我将不胜感激。

myfiddle

<div>
    <label for="fixture-use">Fixture Use? *</label>
    <div class="select-style">
    <select name="fixture-use" id="fixture-use" required>
      <option value="">Please select</option>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="other">Other</option>
    </select>
    <input type="text" class="hidden-textbox" name="fixture-use" 
           id="fixture-use">
    </div>
  </div>  

Answer 1

首先，Ids应该是唯一的。将文本框的ID更改为fixture-use-txt，fixture-use已被下拉列表用作其ID。

将width的{​​{1}}增加到div或更多，以便下拉列表和文本框排成一行。

您需要添加以下jquery代码：

275px

这是一个demo。 （使用show / hide）

或者，可以这样做：

$(document).ready(function(){
 $('#fixture-use').change(function(){ //on change of dropdown
 if($(this).val() == "other") // check if dropdown value is other
 {
  $('#fixture-use-txt').show();  // show textbox
 }
 else
 {
 $('#fixture-use-txt').hide(); //hide textbox

 }
});
});

这是一个demo。 （改为$(document).ready(function(){ $('#fixture-use').change(function(){ //on change of dropdown if($(this).val() == "other") // check if dropdown value is other { $('#fixture-use-txt').css('display','inline'); // show textbox } else { $('#fixture-use-txt').css('display','none'); //hide textbox } }); }); ）

Answer 2

如其他地方所述，元素 的id在文档中必须是唯一的 ;因此id的{​​{1}}和`的<select>必须不同。

然而，为了实现这一目标，id <input>并不是真正的需要。假设HTML结构是可靠的，可以使用jQuery或纯JavaScript从id遍历到<select>。

那就是说，我建议如下：

<input>

// selecting the relevant element, in this case the
// (only) element with the id of 'fixture-use', and
// using the on() method to bind an anonymous function
// as the change event-handler:
$('#fixture-use').on('change', function() {

  // caching the changed-element (the <select>):
  var changed = this,

      // because I want to use the result of this check
      // in two places it makes sense to evaluate the
      // condition once, and then refer to the variable:
      check = changed.value.toLowerCase() === "other";

  // wrapping the changed-element in a jQuery object, to
  // use jQuery methods:
  $(changed)
    // finding the next sibling element:
    .next()
    // toggling the display of that element,
    // to hide and show it depending on the
    // passed-in switch (the Boolean true/false),
    // if true, the element is shown; if false
    // the element is hidden:
    .toggle(check)
    // making the <input> required (if the check
    // is true) or not-required (if the check is
    // false):
    .prop('required', check);

// triggering the change event, causing the event-
// handler to run, on page load; so if the default
// value is 'other' then the <input> will be shown:
}).change();

$('#fixture-use').on('change', function() {
  var changed = this,
    check = changed.value.toLowerCase() === "other";

  $(changed).next().toggle(check).prop('required', check);
}).change();

JS Fiddle demo

Answer 3

您可以使用

Employee|OrderId|SoldAmt |Manager_1_LevelAbove|Manager_2_LevelsAbove| Manager_3_LevelsAbove
Vidur Luthra|94 |733.49  |James Kramer        |Jossef Goldberg      | Ken Sanchez

用于类hidden-textbox，当select == other make hidden-textbox的值显示为inline / block时。

您可以使用jQuery查找更改以选择输入

Answer 4

您可以从下面的代码段中了解一下：

＆＃13;

＆＃13;

$(document).ready(function(){
  $(".hidden-textbox").hide();
  $("select#fixture-use").change(function(){
    var currentVal = $(this).val();
    if(currentVal == "other"){
      $(".hidden-textbox").show();
    }
    else
      $(".hidden-textbox").hide();
  });  
});

＆＃13;

.select-style{
  display: inline-table;
  padding: 0;
  margin-bottom:6px;
  border: 1px solid #ccc;
  width: 252px;
  overflow: hidden;
  background-color: #fff;
  background: #fff url("images/arrowdown.gif") no-repeat 90% 50%;
}

.select-style select{
  padding: 5px 8px;
  width: auto;
  border: none;
  box-shadow: none;
  background-color: transparent;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.hidden-textbox{
  display:inline;
  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
    <label for="fixture-use">Fixture Use? *</label>
    <div class="select-style">
    <select name="fixture-use" id="fixture-use" required>
      <option value="">Please select</option>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="other">Other</option>
    </select>
    <input type="text" class="hidden-textbox" name="fixture-use" 
           id="fixture-use">
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;