I want to use multiselect dropdown for windows phone 8 using HTML 5 and JQuery.

The below code is working perfectly in IOS, Android and also in IE browser. But in the application it is behaving like simple select box, cant do multiple selection.

 <select id="oID_1" size="3" multiple>
        <option>Item 1</option>
        <option>Item 2</option>
        <option>Item 3</option>
 </select>

1. Right now I am getting popup window like this (Screenshot from Phone):

2. But I want something like this (Screenshot from IE browser):

I want to use multiselect dropdown for windows phone 8 using HTML 5 and JQuery.

The below code is working perfectly in IOS, Android and also in IE browser. But in the application it is behaving like simple select box, cant do multiple selection.

 <select id="oID_1" size="3" multiple>
        <option>Item 1</option>
        <option>Item 2</option>
        <option>Item 3</option>
 </select>

1. Right now I am getting popup window like this (Screenshot from Phone):

2. But I want something like this (Screenshot from IE browser):

• javascript
• html
• cordova
• windows-phone-8
• html-select

• 2 i think you means that, "in HTML5 we use something like <select multiple="multiple"> for multiselect dropdown(multiple="multiple" is the attribute which is working in android & ios) so whether we can use this for windows phone 8 (phonegap app) as right now it is not working . According to you which attribute we should use for multiselect dropdown in HTML5 for WP8. – LeNI Commented May 6, 2014 at 5:54
• your mobile os version ? – Arjun T Raj Commented May 6, 2014 at 7:50
• @ArjunTRaj:windows phone 8 – Akhil Xavier Commented May 6, 2014 at 8:01
• Try multiple="true" ? – Hamza Kubba Commented May 11, 2014 at 5:52

6 Answers 6

It may due to phonegap webview in windows phone 8. I too faced the same issue. I just created a simple static application, but the Multiple select box doesn't work. in the phone browser it is ok.

Better thing is, create a html interface and replace select "multiple" with your desired design.

And the above answers may help you to do that.

Thanks.

Hi As per windows 8 Reference multiple attribute | multiple property Sets or retrieves the Boolean value indicating whether multiple items can be selected from a list.

Property values

Type: Boolean

false (false)

Default. Multiple items cannot be selected.

true (true)

Multiple items can be selected.

And we can see documents from HTML 4.01 Specification also, link, microsoft also provided sample code also check this also , in your case try on any other device and simulater, , **As per the Official docs from MS the below code must work. if it is a windows 8 mobile **

<select id="oSelect" multiple>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select> 

OR use WinJS controls

It looks like you actually want checkboxes:

<div>
  <label><input name="oID1" type="checkbox" value="Item 1" /> Item 1</label><br/>
  <label><input name="oID1" type="checkbox" value="Item 2" /> Item 2</label><br/>
  <label><input name="oID1" type="checkbox" value="Item 3" /> Item 3</label><br/>
</div>

The <div> is optional. Note that the name attribute can occur multiple times while the id attribute must be unique (making it less useful for checkboxes). The form should work with name rather than id.

The <label> tags allow the user to click the description and still toggle the checkbox.

I can't guarantee this will work on windows phone, but the HTML is sound.

Try changing multiple to multiple="true" like this:

<select id="oID_1" size="3" multiple="true">
    <option>Item 1</option>
    <option>Item 2</option>
    <option>Item 3</option>
</select>

Try this, it's the correct approach :-

<select id="oID_1" size="3"  data-native-menu="false">
        <option>Item 1</option>
        <option>Item 2</option>
        <option>Item 3</option>
 </select>

You will need to use images for such functionality

http://jsfiddle/WLQqf/

 li 
{ 
    list-style-image: url('http://www.daltonmedical./dalton/service/square_checkbox.gif'); 
    list-style-position: inside;
}