Я пытаюсь реализовать вход выбора, в котором есть «другой» в качестве одного из вариантов раскрывающегося списка. Когда выбрано «другое», я хотел бы отображать обязательный ввод текста в той же строке. Ниже приведен снимок экрана с моими спецификациями и пример того, что у меня есть на данный момент. Я был бы очень признателен, если бы кто-нибудь мог дважды проверить мою структуру html, а также предоставить jquery для переключения отображения / скрытия для поля ввода.

specs

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>  
0
Erick Ye 28 Дек 2015 в 10:12

4 ответа

Лучший ответ

Как упоминалось в другом месте, id элемента должен быть уникальным в документе ; поэтому id у <select> и id у `должны быть разными.

Однако для того, чтобы это работало, нет реальной необходимости для <input> иметь id; предполагая, что структура HTML надежна, можно перейти от <select> к <input> с помощью jQuery или простого JavaScript.

Тем не менее, я бы предложил следующее:

// 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();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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" />
  </div>
</div>

Демонстрация JS Fiddle.

1
David says reinstate Monica 28 Дек 2015 в 08:52

Вы можете взять идею из фрагмента кода ниже:

$(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();
  });  
});
.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;
  
}
<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>
0
vijayP 28 Дек 2015 в 07:38

Прежде всего, идентификаторы должны быть уникальными. Измените идентификатор текстового поля на fixture-use-txt, поскольку fixture-use уже используется раскрывающимся списком в качестве своего идентификатора.

Увеличьте width вашего div до 275px или более, чтобы раскрывающийся список и текстовое поле располагались в одной строке.

Вам нужно добавить следующий код jquery:

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

 }
});
});

Вот демонстрация того же. (Используя показать / скрыть)

Как вариант, это можно сделать так:

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

 }
});
});

Вот демонстрация того же. (Изменяется с помощью css())

1
Senjuti Mahapatra 28 Дек 2015 в 08:39

Ты можешь использовать

display:none 

Для класса hidden-textbox, и когда значение select == other делает отображение скрытого текстового поля inline / block.

Вы можете использовать jQuery, чтобы найти изменения для выбора ввода

0
Geo Paul 28 Дек 2015 в 07:20