Develop Reference

JQuery - Country code with fully customization

<div class="box">
<select class="ignore">
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>
</div>
I'm trying to create a country phone code drop-down with customization.
Here I'm trying to use jquery-nice-select plugin. What I want to know is, is it possible to create country phone code selector using jquery-nice-select plugin? I didn't get a way for that, so can you guys can help me? I have attached my HTML code above.
https://hernansartorio.com/jquery-nice-select/

Create a dynamic submenu in dropdown

I have reasons for rescheduling job and also sub-reason under a reason. I want that on selecting the reason, its sub-reason should appear. How do I do that?
<select>
<option value="" disabled="disable" selected="selected">
Select Reason
</option>
<option ng-repeat="reasons in Resonse_schedule ">
{{reasons.reasons}}
</option>
</select>

Use ng-options
AngularJS provides a directive ng-options to dynamically list down the options
<select ng-options="reason.reason as reason.reason for reason in Resonse_schedule">
<option value="" selected disabled >Select Reason</option>
</select>
I would suggest you to go through the documentation of ngOptions to understand it better

You can use this:
<select ng-model="reasonVar" ng-options="reason as reason.name for reason in Resonse_schedule">
<option value="" disabled="disable" selected="selected">Select Reason
</option>
</select>
<select ng-model="reasonSelected">
<option ng-repeat="subReason in reasonVar.subReasons" value="subReason.name">
{{subReason.name}}
</option>
</select>
Where reasonVar is the selected value from the Resonse_schedule list.
Here's a working example for this code:
http://jsfiddle.net/U3pVM/35122/
And here's more complicated one:
http://jsfiddle.net/miparnisari/u50hgn5a/

dropdown options change based on another dropdowns choices

I have a form that has several dropdowns. I need to make the second dependent on the value of the first. I have a Codepen that shows four dropdowns. The first does not change but the selects 2, 3, and 4 show the intended options I want.
Here is a listing of what option of dropdown 1 leads to the second.
new -> input-2
client -> input-3
admin -> input-4
I am doing this in OpenCart in a MVC so I am a little confused if this all is done in the view file or do I need to have some of this done in the controller, and if so how? I do believe JavaScript would be able to help here but not really sure how to implement that. My code pen is:
https://codepen.io/anon_guy/pen/pdbYad
<form action="/action_page.php">
<select name="Input-1">
<option value="*"></option>
<option value="new">new</option>
<option value="client">client</option>
<option value="admin">admin</option>
</select>
<select name="Input-2">
<option value="sign-up">Sign Up</option>
</select>
<select name="Input-3">
<option value="upgrade">upgrade</option>
<option value="stats">stats</option>
</select>
<select name="Input-4">
<option value="view-accounts">view all</option>
<option value="add">add</option>
<option value="remove">remove</option>
</select>
<input type="submit">
</form>

how to prevent conflict beetween two jquery plugin

I have two jquery plugin
Image Picker link and select2 link
when i use the both of this plugin one of them is cannot run
here is my code
jquery code
$(".select2").select2();
$(".imagepicker").imagepicker();
select menu for select2
<select class="select2">
<option value="1">One</option>
<option value="2">Two</option>
</select>
select menu for imagepicker
<select class="imagepicker">
<option data-img-src="img/01.png" value="1"> Page 1 </option>
<option data-img-src="img/02.png" value="2"> Page 2 </option>
<option data-img-src="img/03.png" value="3"> Page 3 </option>
</select>
I don't know what is happening, but when I use the both of this plugin one of them is not working, maybe because in same select tag?
I am sorry my english is bad

The thumb rule is that your last plugin loaded would overrun the previous segment.

Changing Custom Menu in JQuery Mobile

I'm working with JQuery mobile. I am building a form that includes the following code:
<label for="genderDropDownList">Gender</label>
<select name="genderDropDownList" id="genderDropDownList" data-native-menu="false">
<option>Unspecified</option>
<option value="-1">Unspecified</option>
<option value="0">Male</option>
<option value="1">Female</option>
</select>
A custom menu is shown here. Right now, when someone clicks the drop down, a dialog appears with multiple options. The dialog title says "Unspecified". I know it says this because "Unspecified" is the first option. What I want is, the drop down to default to "Unspecified" and the dialog title to say "Please choose...".
I can't seem to figure out how to do this? I don't see any properties that you can set to accomplish this. Then I thought about listening for the "tap" event, but I couldn't seem to get that to work either.

Try This:
<label for="genderDropDownList">Gender</label>
<select name="genderDropDownList" id="genderDropDownList" data-native-menu="false">
<option>Please choose...</option>
<option value="-1" selected="selected">Unspecified</option>
<option value="0">Male</option>
<option value="1">Female</option>
</select>

Does something like this work?
<label for="genderDropDownList">Gender</label>
<select name="genderDropDownList" id="genderDropDownList" data-native-menu="false">
<option>Please Choose</option>
<option value="-1" selected="selected">Unspecified</option>
<option value="0">Male</option>
<option value="1">Female</option>
</select>