Bootstrap条件表单字段提取基于下拉列表值?

时间:2016-08-23 13:12:36

标签: javascript jquery twitter-bootstrap

我有一个引导程序表单,我想要一些条件提取。我有一个下拉按钮,它有两个选项,如果用户选择任何选项,我想根据选择显示不同的字段。

HTML:

<h1 class="text-center">Setup a new crawler</h1>

  <form role="form" id="crawler-form" class="form-horizontal" action="/launch" method="POST">
     <div class="form-group">
    <label class="control-label col-sm-2" for="choice" >Type of Crawling:</label>
      <div class="col-sm-10">
        <button id="choice" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Crawling Type <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Historical Crawling</a></li>
          <li><a href="#">Real-time Crawling</a></li>
        </ul>
      </div>
    </div>
    <div class="form-group hidden">
        <label class="control-label col-sm-2" for="cname">Name of Crawler:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="cname" name="name" placeholder="Enter crawler name">
      </div>
    </div>
    <div class="form-group hidden">
        <label class="control-label col-sm-2" for="comment">Crawler Description:</label>
        <div class="col-sm-10">
          <textarea class="form-control" rows="3" id="comment"
              name="description"></textarea>
        </div>
    </div>
    <div class="form-group hidden">
        <label class="control-label col-sm-2" for="keywords">Keywords:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="keywords" name="keywords" placeholder="Enter keywords">
      </div>
    </div>
    <div class="form-group hidden">
        <label class="control-label col-sm-2" for="hashtags">Hashtags:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="hashtags" name="hashtags" placeholder="Enter hashtags">
      </div>
    </div>
    <div class="form-group hidden">
        <label class="control-label col-sm-2" for="datepicker">Date:</label>
      <div class="col-sm-10">
      <div class="input-daterange input-group" id="datepicker">
        <input type="text" class="input-sm form-control" name="start" value="2016-04-01"/>
        <span class="input-group-addon glyphicon glyphicon-calendar"></span>
        <span class="input-group-addon control-label">to</span>
        <input type="text" class="input-sm form-control" name="end" value="2016-04-25" />
        <span class="input-group-addon glyphicon glyphicon-calendar"></span>
      </div>
      </div>
    </div>
    <div class="form-group hidden">
      <div class="col-sm-offset-6 col-sm-10">
          <button type="submit" class="btn btn-default" value="Launch" >Start Crawler</button>
      </div>
    </div>

  </form>

使用Javascript:

// Inputs value which determines the fields to revealed
var choice = $('.dropdown-menu ul > li > a').text();

// Wrappers for the all the conditional fields
var name = $('#crawler-form input[name=name]').parent();
var description = $('#crawler-form textarea[name=description]').parent();
var keywords = $('#crawler-form input[name=keywords]').parent();
var hashtags = $('#crawler-form input[name=hashtags]').parent();
var start = $('#crawler-form input[name=start]').parent();
var end = $('#crawler-form input[name=end]').parent();
var all = name.add(description).add(keywords).add(hashtags).add(start).add(end);   //shortcut for all wrapper eliments

var show-form = function(choice){
    all.addClass('hidden');

    if (choice == 'Historical Crawling'){
        name.removeClass('hidden');
        description.removeClass('hidden');
        keywords.removeClass('hidden');
        hashtags.removeClass('hidden');
        start.removeClass('hidden');
        end.removeClass('hidden');
    }
    else if (choice == 'Real-time Crawling'){
        name.removeClass('hidden');
        description.removeClass('hidden');
        keywords.removeClass('hidden');
        hashtags.removeClass('hidden'); 
    }


};

$(document).ready(init);

var init = function(){
    show-form();
};

有人可以帮我理解这个问题吗?代码有什么问题?我也创造了一个小提琴。 [这里](https://jsfiddle.net/amitJS/hu303g9s/) 谢谢。

0 个答案:

没有答案