Develop Reference

How to add a DIV to select option using javascript

My question is about java script, i want to put or add a div or button or input inside select tag using java script.
I using jquery.sumoselect plugin that make you multiple checkbox, but when i want to add some DIVs inside select tag is showing outside the list.
i want the div inside select element like this picture : http://i.stack.imgur.com/Xd6FX.jpg
this is my html code
<div class="select-box-style right">
<div class="your-list-title">Your Lists</div>
<select multiple="multiple" class="md_what_get right SlectBox">
<option selected value="electronics">Electronics</option>
<option value="games">Video Games</option>
<option value="books">Books</option>
<option value="others">Others</option>
<option value="others"><input type="text" name="lname"></option>
</select>
<div class="add-list-box">
<input type="text" class="input-add-list"/>
<label class="label-spcbtn-blue spr" >Add</label>
</div>
</div>
and this how to call the plugin:
<script type="text/javascript">
$(document).ready(function () {
$('.SlectBox').SumoSelect();
});
</script>
thank you for helping!
....
Update!
see this link http://wenzhixin.net.cn/p/multiple-select/docs/
On The Filter1 you can see the input search inside select element, how can i do that?

Neither SumoSelect or MultipleSelect (as is) supports the feature you are looking at. But, first, some clarification needed:
<select> boxes are a standard HTML tag, that accepts no other tags than <optgroup> or <option>. see here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
SumoSelect and MultipleSelect are both Javascript plugins that “converts” real selects into custom built <div> tags, with javascript to handle the logic.
That said, you can either modify/extend those plugins to create the desired <div> or you can build your own “<select> into <div> converter”.
But, for the sake of simplicity, you could just create a <div> with all the desired functionality, using regular plain old checkboxes, and hiding/displaying the whole <div> according to your UX flow/needs.

How to add "rel" attribute to a href of a select element?

So I have this code:
<select onchange="location.href=this.options[this.selectedIndex].value;" name="fancySelect" class="makeMeFancy">
<option value="0" selected="selected" data-skip="1">Choose Your Product</option>
<option value="img/picsamp.jpg" data-icon="img/products/iphone.png" data-html-text="iPhone 4<i>in stock</i>">iPhone 4</option>
<option value="2" data-icon="img/products/ipod.png" data-html-text="iPod <i>in stock</i>">iPod</option>
<option value="3" data-icon="img/products/air.png" data-html-text="MacBook Air<i>out of stock</i>">MacBook Air</option>
<option value="4" data-icon="img/products/imac.png" data-html-text="iMac Station<i>in stock</i>">iMac Station</option>
</select>
With it, I can click on an element and go to the link stored in the "value" attribute. My question is, ¿Can I add a "rel" attribute to that link generated with the onchange? I need to use a rel attribute, not a data-* one.
Edit:
I also need to add ?iframe=true&width=400&height=200 to my links as the lightbox is going to display iframes...

If you're wanting open a modal window, then most libraries allow you to programmatically open windows. So, you could write a code block that listens for the select list to change and then manually open a modal window, with the content coming from the URL you have stored in the currently selected option.

How do I change the header of a jQueryMobile multiple select dialog?

The documentation says - When a select is large enough to where the menu will open in a new page, the placeholder text is displayed in the button when no items are selected, and the label text is displayed in the menu's header. This differs from smaller overlay menus where the placeholder text is displayed in both the button and the header, and from full-page single selects where the placeholder text is not used at all.
I see 2 options here. 1, fix my code to where my label actually hides (I can't figure this out). or 2. Make the multiple select box display the placeholder in the header instead of the label.
Thanks for your help.
Here is the code I'm using:
<div data-role="fieldcontain" class="ui-hide-label">
<label for="abc" class="ui-hidden-accessible">Select</label>
<select name="abc" id="abc" multiple="multiple" data-native-menu="false">
<Option data-placeholder="true">Select Multiple</option>
<Option>Option1</option>
</select>
</div>

Problem with focus transfer on HTML select elements

I have a form made up of a number rows similar to the following HTML -
<div style="display: table-row">
<div style="display: table-cell">
<label for="Region">Region</label>
</div>
<div style="display: table-cell">
<select id="Region" name="Region">
<option value="">Please Select</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AS">American Samoa</option>
</select>
</div>
</div>
I have an HoverOut event that fires when the user moves their mouse cursor out of the outer most that removes focus form the input field in the row. I have some styling that I apply to the row when the row has focus and I remove it when mouse is not over My problem is with Select statements and IE7/8.
If FF5, if I'm using the mouse to select an entry from the select drop down, everything works as expected. However, with IE7/8, what happens is that the outer row receives the mouseout event (firing hover-out) as soon as the mouse cursor leaves the area of the div tag, while I'm attempt to select an entry from the drop down. If I leave the mouse over the div and use the cursor keys to navigate the list, it works fine.
My question is there a way to prevent the mouseout event from being passed to the outer row while I'm still selecting a value from the select list.
You can see working demo at http://jsfiddle.net/photo_tom/9JXfk/9/

You can use this
event.stopPropagation();
this will stop event propagation.

Applying rateit jquery plugin to a select box

I have the following select form element, and I want to apply the rateit jquery plugin to it.
<select class="test" id="Rating" name="Rating">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
and I am trying to apply the plugin using $("select.test").rateit();, but despite fireQuery showing data attached the the select element that, no effect is made and I am still left with a select box, and not a line of stars.
EDIT
CSS File is included
Here is the page in question

You're using the plugin wrong. See very simple example: http://jsfiddle.net/rudiedirkx/ZuJ2k/
The select has to be there, but you still have to reference the div when you call the plugin: $('div#rating2').rateit();
The div then has a reference to the select with a data attribute: data-rateit-backingfld="select#Rating"
edit
Actually it looks like you're not using the plugin at all? Where do you call the plugin?
edit
This is your code:
rateItDiv = $('<div class="rateit" data-rateit-backingfld="#Rating"></div>');
$("div#ReviewInputZone select.test").after(rateItDiv);
$('div#rateit').rateit();
On the last line, you reference div#rateit, but that div doesn't exist. You just created a div.rateit, not a div#rateit. Change either of those to the other, and it should work. I'd keep the # because that's slightly faster (but you'd have to be sure there's only one of these rateit dropdowns on a page).
So the new first line:
rateItDiv = $('<div id="rateit" class="rateit" data-rateit-backingfld="#Rating"></div>');
edit
Also, you can test it before you change any code. Just open your Javascript console (Firebug in FF or Developer tools in Chrome) and type: jQuery('div.rateit').rateit();