CODEWITHSUNDEEP
htmlcss
Gibbs
Gibbs

Reputation: 22964

How to place a drop-down and a div inside a div, so that it ll act as a dropdown?

I am really confuded in this. I have a label and select drop-down inside my container which is right aligned.

GOAL Container should act like a drop-down. Only sort-by label should be displayed initially.When user clicks on it, it should shoe the option to the user.

Problem I don't know how to trigger drop down when i click on the sort by label.

<div class="container">
<label class="Sortlabel">Sort by</label>
<select>
    <option>2</option>
    <option>22</option>
    <option>222</option>
</select>
</div>

If i must use jquery or JS, i ll add these tags also. Any suggestions??

Upvotes: 1

Views: 4301

Answers (1)

Giannis Grivas
Giannis Grivas

Reputation: 3412

And what is the difference with this one : http://jsfiddle.net/csdtesting/vuc81u87/

Result is the same.

<div class="container">
    <label class="Sortlabel"></label>
    <select>
        <option>Sort by</option>
        <option>22</option>
        <option>222</option>
    </select>
</div>

select
{
    width:100%;
    -webkit-appearance: none;
}
.container
{
    float: right;
    width:190px;
}

But if you insists.I took this idea and here it is (Pure Javascript): http://jsfiddle.net/csdtesting/ybjdsqrx/

var state = false;

// <select> element displays its options on mousedown, not click.
showDropdown = function(element) {
  var event;
  event = document.createEvent('MouseEvents');
  event.initMouseEvent('mousedown', true, true, window);
  element.dispatchEvent(event);
};

// This isn't magic.
window.runThis = function() {
  var dropdown = document.getElementById('sel');
  showDropdown(dropdown);
};
select {
  -webkit-appearance: none;
  border: none;
  width: 70%;
}
.container {
  width: 100%;
  float: left;
  width: 190px;
  border: 1px solid;
}
.Sortlabel {
  width: 20%;
}
}
<div class="container">
  <label class="Sortlabel" onclick="runThis()">Sort by</label>
  <select id="sel">
    <option></option>
    <option>2</option>
    <option>22</option>
    <option>222</option>
  </select>
</div>

Upvotes: 1

Related Questions