откройте новое текстовое поле при выборе любого из последних 3-х флажков в выпадающем множественном флажке - PullRequest
Новая
       3

откройте новое текстовое поле при выборе любого из последних 3-х флажков в выпадающем множественном флажке

0 голосов
/ 23 марта 2012

Я пытаюсь сделать следующее: когда в этом раскрывающемся списке множественного выбора выбран какой-либо из последних 3 флажков, я хочу отобразить еще одно текстовое поле , которое будет полем адреса. То, что я делаю в настоящее время, заключается в выборе Информация требуется флажок раскрывающийся список отображается следующим образом:

Любая помощь будет оценена. Спасибо! 

<p id="formSpacing">
  <input id="inforequired" type="checkbox" value="1" 
         onclick="unhide('hidden-input', this)">
  <label for="inforequired" class="iconic link"> Information requested</label>
  <div id="hidden-input" style="display:none">

  <select title="Information Requested" multiple="multiple" 
          name="infoRequested" size="5">
      <option value="option1">options1</option>
      <option value="option2">options2</option>
      <option value="option3">options3</option>
      <option value="option4">options4</option>
      <option value="option5">options5</option>
      <option value="option6">options6</option>
      <option value="option7">options7</option>
      <option value="option8">options8</option>
      <option value="option9">options9</option>
      <option value="option10">options10</option>
  </select>

  </div>
</p>

1 Ответ

1 голос
/ 23 марта 2012

По сути, используя jquery, самый простой способ сделать это - запустить функцию, если была выбрана опция, которая затем проверяет, не превышает ли значение больше 7 (изолируя последние 3)http://jsfiddle.net/KKMuu/1/

и вот используемый код.

Я добавил поле ввода текста для адреса, например, 

<p id="formSpacing">
  <input id="inforequired" type="checkbox" value="1" onclick="unhide('hidden-input', this)">
  <label for="inforequired" class="iconic link"> Information requested</label>
  <div id="hidden-input" style="display:none">

  <select title="Information Requested" multiple="multiple" 
          name="infoRequested" size="5">
      <option value="option1">options1</option>
      <option value="option2">options2</option>
      <option value="option3">options3</option>
      <option value="option4">options4</option>
      <option value="option5">options5</option>
      <option value="option6">options6</option>
      <option value="option7">options7</option>
      <option value="option8">options8</option>
      <option value="option9">options9</option>
      <option value="option10">options10</option>
  </select>
    </br>

      <input id="adressinput" type="text" value="Adress Input" style="display: none;"/>

  </div>
</p>​

Javascriptjquery) 

$(document).ready(function(){

$("#inforequired").change(function () { $('#hidden-input').toggle(); })                                  


$('option').click( function() {
var num = $(this).attr("value").replace('option','')
    if (num > 7) {$('#adressinput').show(); }
    else
    { $('#adressinput').hide(); }

});

если на него уже нет ссылок, вам нужно ссылаться на jquery в своей голове следующим образом: 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
...