0

I have 2 select inputs. I want the options on the second to depend on what's selected on the first.

EXAMPLE

Select 1 - content list:

  • choice 1
  • choice 2

Select 2 - content list:

If I select choice 1 from the first:

  • case A
  • case B
  • case C

If I select choice 2 from the first:

  • case X
  • case Y
  • case Z

Obviously both select inputs are in the same page!

I think I must use jQuery, but I don't know how.

digitalextremist
  • 5,952
  • 3
  • 43
  • 62
user3398109
  • 1
  • 1
  • Is dropdown 2 a "sub menu" of dropdown 1, or is it a separate dropdown? A Bootply of what you have would be helpful. Not sure what you're asking. – digitalextremist Mar 09 '14 at 10:05
  • No..they are 2 separated dropdown menù, but they are in the same page. I want to update instantly the list of the second, depending on the choice I do in the first. – user3398109 Mar 09 '14 at 10:19
  • So the first is two options which toggle on or off the second dropdown menu? How is the click to the first dropdown stored? Again, a bootply of what you currently have would be amazing. – digitalextremist Mar 09 '14 at 10:20
  • Like I wrote, I am a new one and I am not good using bootply. I try to do it and so probably you can understand what I mean! Thank you so much 4 your help. I'll try to crate a bootply example soon!!! :-) – user3398109 Mar 09 '14 at 10:25
  • I TRY TO USE BOOTPLY, SO HERE IT IS: http://www.bootply.com/120259 . – user3398109 Mar 09 '14 at 10:37
  • As I said, the example is really simple...2 dropdown menù in a page. I just would control the second using the choice of the first....So for example if the content of the first is "car-food-weather"..if i select CAR the second content list will be "honda-bmw-mercedes"..if i select food it will be "pasta-ham-potato"...and so on... – user3398109 Mar 09 '14 at 10:39
  • That is extremely helpful. Those are select boxes, not dropdowns, so it has nothing to do with bootstrap and everything to do with jquery only. – digitalextremist Mar 09 '14 at 10:40
  • Aaaaaaah..ok. It's my fault using the incorrect word. Sorry. So you understand what I mean...and as I suppose, it's necessary using jquery. But..how to do it?! Can you help me? – user3398109 Mar 09 '14 at 10:47
  • There are many examples of this on StackOverflow. Here is one: http://stackoverflow.com/questions/5861090/populating-one-select-box-based-on-the-selection-in-another-select-box-jquery – digitalextremist Mar 09 '14 at 10:49
  • I corrected the question for you, and gave you a link to an example/duplicate question. – digitalextremist Mar 09 '14 at 10:53
  • THAN YOU SO MUCH!!! It's hard to find the right thread when I don't know exactly how to explain the problem...Thank you again! :-) – user3398109 Mar 09 '14 at 11:00
  • No problem at all. This is an extremely large place, and jQuery is a very complex environment sometimes. It's hard to know how to phrase questions to get what you want, or even which library you're working with primarily. Welcome to StackOverflow! – digitalextremist Mar 09 '14 at 11:03

2 Answers2

0

I just had some similar code to write, not sure if this may help you.

$(document).ready(function () {

$.DDCache = {
    init: function (DropDown) {
        this.cache = new Object(DropDown.clone());
    },
    FilterDropDown: function (DropDown, value, condition) {
        DropDown.empty();
        DropDown.append(this.cache.children().clone().toArray());
        DropDown.children("[" + value + "='" + condition + "']").remove();
    }
}

//init the cache for the select you want to filter

$.DDCache.init($("#Select2"));

$("#Select1").change(function () {
    $.DDCache.FilterDropDown($("#Select2"), "value", $("#Select1").val());
    });

});

Kind regards

:)

TonySB
  • 13
  • 4
0

Am I right that in you want something like this?

HTML:

<div class="row">
    <div class="span4 offset4">
      <form class="control-group" action="" method="post">
        <!-- DROPDOWN 1 - CHOICE SELECTION -->
        <div class="form-group">
          <select name="document_type" class="form-control input-lg" id="Select1">
            <option value="casea">CHOICE 1</option>
            <option value="caseb">CHOICE 2</option>
            <option value="casec">CHOICE 3</option>
            <option value="cased">CHOICE 4</option>
            <option value="casee">CHOICE 5</option>
          </select>
        </div>
        <!-- DROPDOWN 2 - LIST SELECTION-->
        <div class="form-group">
          <select name="document_type" class="form-control input-lg" id="Select2">
            <option value="casea">CASE A</option>
            <option value="caseb">CASE B</option>
            <option value="casec">CASE C</option>
            <option value="cased">CASE D</option>
            <option value="casee">CASE E</option>
          </select>
        </div>
      </form>
    </div>
</div>

and the script something like this?

 $(document).ready(function () {
     $.DDCache = {
        init: function (DropDown) {
        this.cache = new Object(DropDown.clone());
     },
     FilterDropDown: function (DropDown, value, condition) {
        DropDown.empty();
        DropDown.append(this.cache.children().clone().toArray());
        DropDown.children("[" + value + "!='" + condition + "']").remove();
     }
  }

  //init the cache for the select you want to filter

  $.DDCache.init($("#Select2"));

   $("#Select1").change(function () {
      $.DDCache.FilterDropDown($("#Select2"), "value", $("#Select1").val());
   });
});

just created a jsfiddle for you :)

http://jsfiddle.net/NBuSA/6/

TonySB
  • 13
  • 4