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

Question

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??

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

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>

edited May 23 '17 at 12:20

Community

1
1

answered Oct 18 '14 at 08:33

Giannis Grivas

3,374
1
18
38

No John. Sort by should be a label as per my requirement. I knew this. – Gibbs Oct 18 '14 at 08:35
Ok let me try another – Giannis Grivas Oct 18 '14 at 08:35
1

+1 John for your try. I am really waiting if there is a pure css solution alone. Thanks. If not possible, its the best answer – Gibbs Oct 18 '14 at 08:56
I tried it in ff. It shows mouseevent.init is called with less number of parameters – Gibbs Oct 18 '14 at 08:57
Thanks a lot .Give a trybut i think it is not possible with css only. – Giannis Grivas Oct 18 '14 at 08:57
Sure John. I ll try. If i find it, i ll post it. Thanks man :) – Gibbs Oct 18 '14 at 08:59

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

1 Answers1