Select Menu not displaying options

Question

I've created a simple select menu

<select class="element">
   <option value="3">Read Only</option>
   <option value="1">Editable</option>
   <option value="2">Hidden</option>
</select>

However, when I click on the select menu, nothing happens. I've attached an jQuery onclick listener to determine if the click is being registered and it is. However, the options are not being displayed.

Is there any particular reason why the options list would not be displayed?

CSS rules as requested:

select {
  height: 25px;
  background: #FFFFFF;
}

$('.element').on('click', function(){
   console.log('clicked');
});

Do you have any CSS rules written for the element class, select element, or the option element? The CSS on the page could be affecting the behavior of the select list. Also the jQuery code you added could affect its behavior. Could you add this info to the description of your problem. — BrightIntelDusk, Mar 05 '14 at 14:59
No, the only css rule governs colouring. I've added it to the description. — SharePoint n00b, Mar 05 '14 at 15:06
Thanks for the recommendation but the noConflict() function didn't solve the problem. I think it would be good to note that I have 2 of these select menus on my page. One works but the other doesn't. Both are identical. That is why I use the class attribute as opposed to the id — SharePoint n00b, Mar 05 '14 at 18:05
That is very helpful to know you are using 2 select menus. What version of jquery are you using? — BrightIntelDusk, Mar 05 '14 at 20:12

Carlos Morales · Answer 1 · 2014-03-05T15:36:32.277

0

Check this code:

    ### Listbox
    http://jsfiddle.net/4jkE8/2/

Try this on your css:

select {
  height: 25px;
  background: #FFFFFF;
}
$.noConflict();
$('.element').on('click', function(){
   console.log('clicked');
});

Also I think that you have a Javascript or Jquery file that is making conflict, try creating this on your view:

 <select class="element">
   <option value="3">Read Only</option>
   <option value="1">Editable</option>
   <option value="2">Hidden</option>
 </select>
 <script type="text/javascript">$.noConflict();</script>

edited Mar 05 '14 at 15:36

answered Mar 05 '14 at 14:56

Carlos Morales

1,137
3
15
38

That is what I was also thinking that he may have a conflict in the code. – BrightIntelDusk Mar 05 '14 at 15:16

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

Change your class name to something different. Then instead of using it as a class change it to an id. Then in your jQuery detect the on change event. Usually when having a select option you only need one of them. The id attribute is meant for when there is only one one of that element on a page.

I feel fairly certain that the click event does not work for all browsers on a select list. You may want to check out this question: Click event on select option element in chrome

HTML Code:

<select id="status">
   <option value="3">Read Only</option>
   <option value="1">Editable</option>
   <option value="2">Hidden</option>
</select>
<select id="status">
   <option value="3">Read Only</option>
   <option value="1">Editable</option>
   <option value="2">Hidden</option>
</select>

JavaScript Code:

$('#status').on('change', function(){
   console.log('changed');
});

edited May 23 '17 at 12:20

Community

1
1

answered Mar 05 '14 at 15:22

BrightIntelDusk

4,577
2
25
34

I have two select menus hence the need for the class attribute. I'm detecting the onclick event. The onclick event registers fine. There's no conflicts. The select dropdown just isn't displaying the options when I click it. The options are clearly defined, passed the necessary HTML validation tests to ensure I'm not missing a quotation, etc. – SharePoint n00b Mar 05 '14 at 18:09
The other option is create a new project and check your code, I'm really sure 100 % that you have a javascript or jquery that is making conflict because I had the same error in some projects, but is your project just an opinion. – Carlos Morales Mar 06 '14 at 20:12

Select Menu not displaying options

2 Answers2