Develop Reference

How to trigger dynamic dropdown in Edit View

I am new to web development and I just learned Jquery to create dynamic dropdowns. The problem that I am facing is that my dropdowns are not being updated when I go to the edit view.
So I have been able to successfully create dynamic dropdowns for my Create view (see code).
Create.cshtml:
<div class="form-group col-md-4" id="drop_1">
<label asp-for="Option_1" class="control-label"></label>
<select asp-for="Option_1" class="form-control" id="opt1">
<option value="">Select Option</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<span asp-validation-for="Option_1" class="text-danger"></span>
</div>
<div class="form-group col-md-4" id="drop_2">
<label asp-for="Option_2" class="control-label"></label>
<select asp-for="Option_2" class="form-control" id="opt2">
<option value="">Select Option</option>
</select>
<span asp-validation-for="Option_2" class="text-danger"></span>
</div>
<div class="form-group col-md-4" id="drop_3">
<label asp-for="Option_3" class="control-label"></label>
<select asp-for="Option_3" class="form-control" id="opt3">
<option value="">Select Option</option>
</select>
<span asp-validation-for="Option_3" class="text-danger"></span>
</div>
Edit.cshtml is the same as Create.cshtml
Site.js:
$(function() {
$('#opt3').change(function () {
var x = $(this);
if (x.val() == "") {
$('#drop_2').hide();
$('#drop_3').hide();
}
else {
if (x.val() == "A") {
$('#opt2').find('option').remove().end();
$('#opt2').append('<option value="D">D</option>');
.
.
. etc.
}
}
//Same for the remaining dropdowns
});
});
The point is that my dropdowns work when I start clicking on my dropdowns. But what I would like to see is that when I try to go into my edit views and the data is pulled in, the dropdowns automatically get changed based on whatever data there is for dropdown 1 and 2, without the user having to reselect dropdown 1 and 2.

The change event is sent to an element when its value changes. If you want to make the dropdownlist changes when page is loading the first time , you can write your javascript methods directly in $(function () {}); . For example , if you want to add D option to select 2 after loading edit views :
<script>
$(function () {
$('#opt2').append('<option value="D">D</option>');
//write your other logic here
$('#opt3').change(function () {
var x = $(this);
if (x.val() == "") {
$('#drop_2').hide();
$('#drop_3').hide();
}
else {
if (x.val() == "A") {
$('#opt2').find('option').remove().end();
$('#opt2').append('<option value="D">D</option>');
}
}
//Same for the remaining dropdowns
});
});
</script>

jQuery in Wordpress plugin not working for select option

I am currently working on a plugin for front-end user creation, but it is little more specific to the website I am working on.
Part of the form that I am using to collect the information, it asks if the currently logged in user wants to create an "Admin", "Manager" or "User":
<select class="form-control" name="userType" id="userSelection">
<option></option>
<option id="adminValue" value="adminSelect">Admin</option>
<option id="managerValue" value="managerSelect">Manager</option>
<option id="userValue" value="userSelect">User</option>
</select>
<div id="adminSelect" class="typeselection" style="display:none;">
<div class="form-group">
<select name="adminType" class="form-control">
<option value="admin1">Admin1</option>
<option value="admin2">Admin2</option>
</select>
</div>
</div>
<div id="managerSelect" class="typeselection" style="display:none;">
<div class="form-group">
<select name="managerDepartment" class="form-control">
<option value="manager1">Manager1</option>
<option value="manager2">Manager2</option>
</select>
</div>
</div>
<div id="userSelect" class="typeselection" style="display:none;">
<div class="form-group">
<select name="userDepartment" class="form-control">
<option value="user1">User1</option>
<option value="user2">User2</option>
</select>
</div>
</div>
As for the js file:
(function( $ ) {
'use strict';
$('#userSelection').on('change',function(){
('.typeselection').hide();
('#' + this.val()).show();
});
})( jQuery );
After choosing from the first select options (name="userType"), one of the 3 following divs(id="adminSelect", id="managerSelect", id="userSelect") would appear and allow for more specific options for the current user.
What I have currently in my code is not working with the js (saw a couple of different posts on here and other sites regarding this) though, and I have checked to make sure the file is being loaded and it is as well.
I used Plugin Boilerplate Generator to start out the plugin as well and placed the js in the public/js/plugin-name.js file.

You gave the divs display: none;, which means it won't be displayed.
Instead of using ('#' + this.val()).show(); make a class called 'hidden' with the display: none; style. Give this class to the divs, and if one of the divs is clicked, use the following code:
$( "+"this.id ).removeClass( "hidden" );
This way you'll remove the display: none; property.

Drop down price update

I am trying to build an app that let people choose a license and the price is different for different licenses. I want a real-time price update on the page of the product. Here is the reference that I took for the below code: https://stackoverflow.com/a/6740218
Code:
<script type="text/javaScript">
var price = {"3":"11","2":"500","1":"1000"};
$(function() {
$('select[name=dropdown_price_change]').change(function() {
document.getElementById('price_disp').innerHTML = price[$(this).val()];
});
// Trigger on dom ready
$('select[name=dropdown_price_change]').change();
});
</script>
<div class="product-price" id="price_disp">
<form class="cart nobottommargin clearfix" method="get">
<div class="quantity clearfix">
<select id="dropdown_price_change" name="dropdown_price_change" class="form-control">
<option value="3">Personal License</option>
<option value="2">Small Firm License</option>
<option value="1">Enterprise or Developer License</option>
</select>
</div>
</form>
</div>
Thanks in advance. ;)

innerHtml should be innerHTML and frankly, you should probably be using textContent instead of innerHTML in this case anyway since the values of the select don't contain any HTML.
Also, you shouldn't trigger the change function on document ready because the user will never get to see and use the dropdown list that way.
Lastly, add a "dummy" choice to the list as the default choice so that the user must change the value if they want to select "Personal License" from the list. Without this, the change event won't trigger because that was the default choice in the first place.
var price = {"3":"11","2":"500","1":"1000"};
$(function(){
$('select[name=dropdown_price_change]').change(function(){
document.getElementById('price_disp').textContent = price[$(this).val()];
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-price" id="price_disp">
<form class="cart nobottommargin clearfix" method="get">
<div class="quantity clearfix">
<select id="dropdown_price_change" name="dropdown_price_change" class="form-control">
<option value="">-- Select an Option --</option>
<option value="3">Personal License</option>
<option value="2">Small Firm License</option>
<option value="1">Enterprise or Developer License</option>
</select>
</div>
</form>
</div>

Bootstrap Select Menu - Add New Option

I have a simple Bootstrap form with a select input:
<div class="form-group">
<label for="category" class="control-label col-sm-3">Category</label>
<div class="input-group col-xs-8">
<select class="form-control" name="category" id="category">
<option value="Fruit">Fruit</option>
<option value="Vegetables">Vegetables</option>
</select>
</div>
</div>
The users now have a requirement to be able to add a new option dynamically to the select menu rather than be restricted to the items on the select menu.
I'm not sure if it's possible to modify a select menu and how to make it consistent with the rest of the Bootstrap framework?

To add an option dynamically, there should be a UI button giving you that choice. To get user input, we can use the window.prompt method.
We then create an option element, set its value attribute and set its name. Then just append these elements and nodes to the DOM with appendChild
Try playing around with this. I added some items like Steak, potatoes and beer.
var addOption = document.getElementById("add-option");
var selectField = document.getElementById("category");
addOption.addEventListener("click", function() {
var item = prompt("What would you like");
var option = document.createElement("option");
option.setAttribute("value", item);
var optionName = document.createTextNode(item);
option.appendChild(optionName);
selectField.appendChild(option);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="category" class="control-label col-sm-3">Category</label>
<div class="input-group col-xs-8">
<select class="form-control" name="category" id="category">
<option value="Fruit">Fruit</option>
<option value="Vegetables">Vegetables</option>
</select>
</div>
</div>
<button id="add-option" class="btn btn-primary">Add a new option</button>

You mean something like this?
some select
<select id="region" class="selectpicker">
<option>region 1</option>
<option>region 2</option>
<option>region 3</option>
</select>
jquery js
$('.selectpicker').selectpicker();
$("#region").on('change', function () {
$(this)
.append('<option>region4</option><option>region5</option>')
.selectpicker('refresh');
});

Adding two identical select2 forms to same page

I am trying to add two select2 multi-value select boxes to my Rails app.
The top form works fine, but the bottom one does not work.
I experimented with changing ids and adding new js code, but no success. Is there something fundamentally wrong that I'm missing?
Index.html
# This one works fine
<div class="search_genre">Genre:</div>
<div class="select2-container select2-container-multi populate">
<select multiple="" name="e9" id="e9" style="width:300px" class="populate select2-offscreen" tabindex="-1" placeholder="Search or Select">
<optgroup label="Popular">
<option value="Alt">Rock</option>
<option value="Ind">Indie</option>
<option value="Ind">Alternative</option>
<option value="Ind">Acoustic</option>
</optgroup>
</select>
</div>
# This one doesn't show a text input or the optiongroup values
<div class="search_region">Region:</div>
<div class="select2-container select2-container-multi populate">
<select multiple="" name="e9" id="e9" style="width:300px" class="populate select2-offscreen" tabindex="-1" placeholder="Search or Select">
<optgroup label="Local">
<option value="PDX">Greater Portland</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
</select>
</div>
application.js
$("#e9").select2();

You can not have two elements with the same id. Use classes instead.
Both your selects have id="e9" instead try adding something like class="my-select" to your <select> element.
then do $('.my-select').select2();

For each select2 in the same page you must define unique id for tag "data-select2-id".
data-select2-id="Project"
and
data-select2-id="WBSDate"

As #Ramy Mention. I hope its works fine for everyone.
If It won't work then try this.
In select box you can't use same id for an example:
<select class="form-control select2" id="select">
<option>Select</option>
<option>Cycle</option>
<option>Horse</option>
</select>
<select class="form-control select2" id="select">
<option>Select</option>
<option>Cycle</option>
<option>Horse</option>
</select>
If you have same id the search box won't work.
Just try to different Id Name like below.
<select class="form-control select2" id="select">
<option>Select</option>
<option>Cycle</option>
<option>Horse</option>
</select>
<select class="form-control select2" id="select1">
<option>Select</option>
<option>Cycle</option>
<option>Horse</option>
</select>
I faced this kind of problem. That's why i shared here my opinion.
Thanks hope someone will get help from this.

Ok, so it was something fundamental!
The id's were both the same. This seemed odd to me, and was the first thing that I changed to see if it would work. I added a new jquery code to application.js with id #e10 and changed teh second form's id accordingly. Yesterday, this didn't work. However, today it did. I must have missed something silly, like saving the page...
I wish SO allowed you to delete answers.

Using identical data-select2-id property solve the problem.
MVC input helpers throws sytax error for hyphen, replace the hyphen with underscore, and salute.
#Html.ListBoxFor(x => x.WIds, WList, new { #class = "form-control opWflWafers", #multiple = "multiple", data_select2_id=identicalname })

<div class="float-left col-sm-3">
<select class="form-control" id="parentesco" name="parentesco[]" required></select>
</div>
<script>
$('#parentesco*').select2({
placeholder: 'Seleccionar paciente',
ajax: {
url: 'ajax_paciente.php',
dataType: 'json',
delay: 250,
processResults: function (data) {
return {
results: data
};
},
cache: true
}
});
</script>