We Keep Coding

GetEnumSelectList overrides the default selected option values

I am loading EnumData to a dropdown list, but default value is getting overridden. When I changed the default values of Enum to start with 1 rather 0(since it is default) by that time default value showing up but if Enum starts from 0(default), default selected value in dropdown overrides with the first enum selection.
Below is my code:
<div class="form-group row">
<label asp-for="Feature" class="col-md-4 control-label"></label>
<div class="col-md-8">
<select asp-for="Feature" asp-items="Html.GetEnumSelectList<Features.FeatureType>()">
<option selected="selected" value="">Please select</option>
</select>
</div>
</div>
When I opened developer tools in browser saw 2 dropdown values selected attribute assigned to "selected".
<option selected="**selected**" value="">Please select</option>
<option selected="**selected**" value="0">Feature 0</option>
<option value="1">Feature 1</option>
<option value="2">Feature 2</option>
<option value="3">Feature 3</option>
How to overcome from this problem?

You can try two ways:
1.Remove the asp-for tag helper in select element. Manully add its name and id.
<select name="Feature" id="Feature" asp-items="Html.GetEnumSelectList<Features.FeatureType>()">
<option selected="selected" value="">Please select</option>
</select>
2.Write js to set the selected option:
<script>
$("select").prop("selectedIndex", 0);
</script>

dynamic drop down menu for labels

I currently have a drop down menu displaying 3 options. Once the user selects an option, another drop down menu will display itself based on the choice from the first menu.
The first dropdown(InDiameter):
<label for="innerdiameter"><i class="fa fa-asterisk text-danger"></i>1. Inner Diameter:(*)
<select id="InDiameter" name="InDiameter">
<option value="N/A">Select</option>
<option value="Standard(1.0-5.0mm)">Standard(1.0-5.0mm)</option>
<option value="Microcuff(0.3-0.75mm)">Microcuff(0.3-0.75mm)</option>
<option value="Nanocuffs(56-250μm)">Nanocuffs(56-250μm)</option>
</select>
</label>
Second dropdown(Standard):
<label for="standard"> <br>1a. Inner Diameter for Standard:
<select id="Standard" name="Standard">
<option value="N/A">Select</option>
<option value="1mm">1mm</option>
<option value="1.5mm">1.5mm</option>
<option value="2mm">2mm</option>
<option value="2.5mm">2.5mm</option>
<option value="3mm">3mm</option>
<option value="3.5mm">3.5mm</option>
<option value="4mm">4mm</option>
<option value="5mm">5mm</option>
</select>
</label>
I've tried several js solutions, but none of them have worked. Any help would be appreciated.

in this case you need some one code of javascript and jquery:
the html code:
<label >Select:</label>
<select id="InDiameter" name="InDiameter" required onchange="miFuncion($(this).val());">
<option value="N/A">Select</option>
<option value="Standard">Standard(1.0-5.0mm)</option>
<option value="Microcuff">Microcuff(0.3-0.75mm)</option>
<option value="Nanocuffs">Nanocuffs(56-250μm)</option>
</select>
<div id="selectStandar" style="display:none;">
<label>Standard:</label>
<select id="Standard" name="Standard">
<option>Select</option>
<option value="1mm">1mm</option>
<option value="1.5mm">1.5mm</option>
<option value="2mm">2mm</option>
<option value="2.5mm">2.5mm</option>
<option value="3mm">3mm</option>
<option value="3.5mm">3.5mm</option>
<option value="4mm">4mm</option>
<option value="5mm">5mm</option>
</select>
</div>
<div id="selectMicrocuff" style="display:none;">
<label>Microcuff:</label>
<select id="Microcuff" name="Microcuff">
<option value="1">Microcuff 1</option>
<option value="2">Microcuff 2</option>
</select>
</div>
code jquery and Javascript
function miFuncion(value_selected){
if (value_selected=='Standard'){
$("#selectStandar").show();
$("#selectMicrocuff").hide();
}
if (value_selected=='Microcuff'){
$("#selectMicrocuff").show();
$("#selectStandar").hide();
}
}//end function
in this case i validate the first select(InDiameter), take the value and if is a Standard i show the div that have the select with the options Standard..and etc..
is only a method exist differentes methods..
Verify here

How to select <select> elements with no html in them through JQuery

I have following html select elements
<select id="options1" title="prd_name" name="options">
<option value="optiona">Option A</option>
<option value="optionb">Option B</option>
<option value="optionc">Option C</option>
</select>
<select id="options2" title="prd_name" name="options"> </select>
<select id="options3" title="prd_name" name="options"> </select>
<select id="options4" title="prd_name" name="options"> </select>
Only the first select element with id="options1" has option tags in it, the rest of select elements are empty. I want to select those empty select elements so that I be able to populate options into them, without touching the first select element which already has options into it. How can I do this especially through Jquery?

You can use selector select:empty; alternatively you can use select:not(:has(option))
console.log($("select:empty"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<select id="options1" title="prd_name" name="options">
<option value="optiona">Option A</option>
<option value="optionb">Option B</option>
<option value="optionc">Option C</option>
</select>
<select id="options2" title="prd_name" name="options"></select>
<select id="options3" title="prd_name" name="options"></select>
<select id="options4" title="prd_name" name="options"></select>

try this
var $select = $("select").filter(function () {
return !$(this).find("option").length;
});
console.log($select);
$select will give you all the select boxes except the with option elements
then you can loop over $select and perform any task on it

populating state dropdown from country selection in asp

i have an old classic asp application that need to update. i need to add 2 dropdowns and the second one needs to be populated based on the first (ex. country and states). how do you do that using javascript?

UPDATE: Based on your comment below, I've updated my response to include code that will do what you're wanting. You can use the optgroup element to filter options based on what country is selected without having to use Ajax.
First way: (optgroup filtering)
Working example on jsFiddle.
HTML:
<select id="C_Country" name="C_Country" aria-required="true" class="required">
<option value="">-- Please Select --</option>
<option value="USA">United States</option>
<option value="CA">Canada</option>
</select>
<p>
<label for="C_State_Prov">State or Province <span title="required">*</span>
</label>
</p>
<select id="C_State_Prov" name="C_State_Prov" aria-required="true" class="required">
<option value="" selected="">-- Please Select --</option>
<optgroup label="United States">
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
</optgroup>
<optgroup label="Canada">
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
</optgroup>
</select>
JavaScript:
var state_province = $('#C_State_Prov option, #C_State_Prov optgroup');
state_province.hide();
$('#C_Country').change(function () {
state_province.hide();
$("#C_State_Prov optgroup[label='" + $(this).find(':selected').html() + "']")
.children()
.andSelf()
.show();
});
Second way: (Ajax)
Working example on jsFiddle.
Here's a rough idea of how to accomplish this. The URL defined in the jQuery should point to a location where the server-side code will generate the HTML needed based on the country the user selected (instead of being defined as a variable in the JavaScript).
HTML:
<form action="#">
<div>
<label for="country">Country:</label>
</div>
<div>
<select name="country" id="country">
<option value="">Please select</option>
<option value="us">United States</option>
</select>
</div>
<div id="stateContainer" class="hidden">
<div>
<label for="state">State</label>
</div>
<div>
<select id="state" name="state"></select>
</div>
</div>
<div>
<input type="submit" id="submit" name="submit" value="Submit">
</div>
</form>
CSS:
.hidden {
display: none;
}
JavaScript:
var $country = $("#country"),
$stateContainer = $("#stateContainer"),
$state = $("#state"),
url = "http://jsfiddle.net/htmled/KZ4jd/",
html = '<option value="al">Alabama</option><option value="ar">Arkansas</option>',
countryVal;
$country.change(function () {
countryVal = $country.val();
$stateContainer.show();
$state.html(html).load(loadUrl);
});

jQuery Mobile Horizontal Select Box

I have been struggling with getting this to work properly. I am trying to get the Horizontally grouped select inputs to work, on my mobile site from this page:
http://jquerymobile.com/demos/1.0/docs/forms/selects/
Right now my select boxes look like this:
But when I view the example it looks like this:
My HTML looks like this:
<fieldset data-role="controlgroup" data-type="horizontal">
<select name="select-choice-month" id="select-choice-month">
<option>M</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="select-choice-day" id="select-choice-day">
<option>D</option>
<?php while($c < 32) {
echo '<option value="'.$c.'">'.$c.'</option>';
$c++;
} ?>
</select>
<select name="select-choice-year" id="select-choice-year">
<option>Y</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
</fieldset>
And my include scripts look like this:
<link rel="stylesheet" href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="//code.jquery.com/jquery-1.6.4.js"></script>
<script src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
I've tried copying and pasting the example exactly, and I still get the vertical and not horizontal, what am I doing wrong here?

Ok. So playing around with it some more and I got the select options working as you want it. These were the changes I had:
<meta name="viewport" content="width=device-width, initial-scale=0.9">
Keep in mind that the initial-scale value will change as per the width of your page and design.
Then I changed the select options as follows:
<div data-role="fieldcontain">
<div data-role="controlgroup" data-type="horizontal">
<select name="select-choice-month" id="select-choice-month" data-mini="true">
<option>Month</option>
<option value="jan">January</option>
<!-- etc. -->
</select>
<select name="select-choice-day" id="select-choice-day" data-mini="true">
<option>Day</option>
<option value="1">1</option>
<!-- etc. -->
</select>
<select name="select-choice-year" id="select-choice-year" data-mini="true">
<option>Year</option>
<option value="2011">2011</option>
<!-- etc. -->
</select>
</div>
</div>
For some strange reason adding the legend tag inside the controlgroup wrapper breaks the design. Don't know if this is a bug or not. If you want a title for the dropdowns then you can do the following:
<div data-role="controlgroup" data-type="horizontal">
<div style="font-weight: bold;">Date of Birth</div>
These changes worked for me on my iPhone4, HTC One, and iPad (there is a whole lot more real estate on the iPad, so it was always going to work. But tested it there anyway).