javascript - Multi selection drop down menu - Stack Overflow-369IT编程

admin管理员组
文章数量:1026073

I have a problem in some Html and CSS code that i want to do multi selection drop down menu but i face a problem.

what i want to do is something like that :

and what i have done so far is

and here is my Html code :

<div class="btn-group">
    <button type="button" class="multiselect dropdown-toggle btn btn-default"
            data-toggle="dropdown" title="Columns">
        Columns
        <b class="caret">
        </b>
    </button>
    <ul class="dropdown-menu">
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="cheese">Cheese</input>

            </label>
        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="tomatoes">Tomatoes</input>

            </label>
        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="mozarella">Mozzarella</input>

            </label>
        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="mushrooms">Mushrooms</input>

            </label>
        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="pepperoni">Pepperoni</input>

            </label>

        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="onions">Onions</input>

            </label>
        </li>
    </ul>
</div>

and my css code :

   ul.dropdown-menu {
    height: auto;
    width: auto;
}

ul.dropdown-menu li {
    height: auto;
    width: auto;

}
ul.dropdown-menu li label {
    display: block;
    padding-left: 40px;
}

My problem is that when i choose any check box input the block disappear and i should open it again to select values !.

i need some help please

I have a problem in some Html and CSS code that i want to do multi selection drop down menu but i face a problem.

what i want to do is something like that :

and what i have done so far is

and here is my Html code :

<div class="btn-group">
    <button type="button" class="multiselect dropdown-toggle btn btn-default"
            data-toggle="dropdown" title="Columns">
        Columns
        <b class="caret">
        </b>
    </button>
    <ul class="dropdown-menu">
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="cheese">Cheese</input>

            </label>
        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="tomatoes">Tomatoes</input>

            </label>
        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="mozarella">Mozzarella</input>

            </label>
        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="mushrooms">Mushrooms</input>

            </label>
        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="pepperoni">Pepperoni</input>

            </label>

        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="onions">Onions</input>

            </label>
        </li>
    </ul>
</div>

and my css code :

   ul.dropdown-menu {
    height: auto;
    width: auto;
}

ul.dropdown-menu li {
    height: auto;
    width: auto;

}
ul.dropdown-menu li label {
    display: block;
    padding-left: 40px;
}

My problem is that when i choose any check box input the block disappear and i should open it again to select values !.

i need some help please

Share Improve this question edited Jun 6, 2016 at 3:54 asked Jun 6, 2016 at 3:35 Mostafa Mohamed 84615 silver badges39 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

You can try like this

$(document).on('click', '.dropdown-menu', function (e) {
  e.stopPropagation(); // it will not propagate the action to parent for closing
});

Text-indent is negative, thereby it is pulling the checkbox. Please remove that property and see what happens.

It may helps you :

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn./bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="button-group">
        <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="caret"></span>Choose
        </button>
        <ul class="dropdown-menu">
          <li>
            <input type="checkbox" name="multiselect" value="cheese">Cheese</input>
          </li>
          <li>
            <input type="checkbox" name="multiselect" value="tomatoes">Tomatoes</input>
          </li>
          <li>
            <input type="checkbox" name="multiselect" value="mozarella">Mozzarella</input>
          </li>
          <li>
            <input type="checkbox" name="multiselect" value="mushrooms">Mushrooms</input>
          </li>
          <li>
            <input type="checkbox" name="multiselect" value="pepperoni">Pepperoni</input>
          </li>
          <li>
            <input type="checkbox" name="multiselect" value="onions">Onions</input>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

I have a problem in some Html and CSS code that i want to do multi selection drop down menu but i face a problem.

what i want to do is something like that :

and what i have done so far is

and here is my Html code :

<div class="btn-group">
    <button type="button" class="multiselect dropdown-toggle btn btn-default"
            data-toggle="dropdown" title="Columns">
        Columns
        <b class="caret">
        </b>
    </button>
    <ul class="dropdown-menu">
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="cheese">Cheese</input>

            </label>
        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="tomatoes">Tomatoes</input>

            </label>
        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="mozarella">Mozzarella</input>

            </label>
        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="mushrooms">Mushrooms</input>

            </label>
        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="pepperoni">Pepperoni</input>

            </label>

        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="onions">Onions</input>

            </label>
        </li>
    </ul>
</div>

and my css code :

   ul.dropdown-menu {
    height: auto;
    width: auto;
}

ul.dropdown-menu li {
    height: auto;
    width: auto;

}
ul.dropdown-menu li label {
    display: block;
    padding-left: 40px;
}

My problem is that when i choose any check box input the block disappear and i should open it again to select values !.

i need some help please

I have a problem in some Html and CSS code that i want to do multi selection drop down menu but i face a problem.

what i want to do is something like that :

and what i have done so far is

and here is my Html code :

<div class="btn-group">
    <button type="button" class="multiselect dropdown-toggle btn btn-default"
            data-toggle="dropdown" title="Columns">
        Columns
        <b class="caret">
        </b>
    </button>
    <ul class="dropdown-menu">
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="cheese">Cheese</input>

            </label>
        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="tomatoes">Tomatoes</input>

            </label>
        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="mozarella">Mozzarella</input>

            </label>
        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="mushrooms">Mushrooms</input>

            </label>
        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="pepperoni">Pepperoni</input>

            </label>

        </li>
        <li>
            <label class="checkbox">

                <input type="checkbox" name="multiselect" value="onions">Onions</input>

            </label>
        </li>
    </ul>
</div>

and my css code :

   ul.dropdown-menu {
    height: auto;
    width: auto;
}

ul.dropdown-menu li {
    height: auto;
    width: auto;

}
ul.dropdown-menu li label {
    display: block;
    padding-left: 40px;
}

My problem is that when i choose any check box input the block disappear and i should open it again to select values !.

i need some help please

Share Improve this question edited Jun 6, 2016 at 3:54 asked Jun 6, 2016 at 3:35 Mostafa Mohamed 84615 silver badges39 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

You can try like this

$(document).on('click', '.dropdown-menu', function (e) {
  e.stopPropagation(); // it will not propagate the action to parent for closing
});

Text-indent is negative, thereby it is pulling the checkbox. Please remove that property and see what happens.

It may helps you :

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn./bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="button-group">
        <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="caret"></span>Choose
        </button>
        <ul class="dropdown-menu">
          <li>
            <input type="checkbox" name="multiselect" value="cheese">Cheese</input>
          </li>
          <li>
            <input type="checkbox" name="multiselect" value="tomatoes">Tomatoes</input>
          </li>
          <li>
            <input type="checkbox" name="multiselect" value="mozarella">Mozzarella</input>
          </li>
          <li>
            <input type="checkbox" name="multiselect" value="mushrooms">Mushrooms</input>
          </li>
          <li>
            <input type="checkbox" name="multiselect" value="pepperoni">Pepperoni</input>
          </li>
          <li>
            <input type="checkbox" name="multiselect" value="onions">Onions</input>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

本文标签： javascriptMulti selection drop down menuStack Overflow

版权声明：本文标题：javascript - Multi selection drop down menu - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://it.en369.cn/questions/1745622600a2159666.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

javascript - Multi selection drop down menu - Stack Overflow

3 Answers 3

3 Answers 3

更多相关文章