Develop Reference

I have a dropdown list and i want it to show the selected value on. the submit button

I want something like when I select a value on the drop-down list, that particular value has to show on my submit button. Please check the link below for what I mean
https://www.elefant-tours.de/ueber-uns/reiseanmeldung/?wetu_id=15FAC4B2-C939-4179-918D-E3140BA3177E

Example of that behavior with jquery.
You need to match the select id
and also insert a span tag inside the button with a matching class
Live example:
https://jsfiddle.net/1qjvtc86/
From gravityforms site:
there is an easy way to add custom Javascript to your Gravity Forms
that only loads when the form is rendered. Just copy-and-paste your
desired snippet into the robust editor on your Form Settings and
you’re golden.
<div>
<select id="picker">
<option value="5">5 items</option>
<option value="4">4 items</option>
<option value="3">3 items</option>
<option value="2">2 items</option>
<option value="1">1 items</option>
</select>
</div>
<div>
<button>user picked <span class="pickedAmount">1</span> items</button>
</div>
<!-- copy this into gravity form -->
<script>
// picker - is the ID of the select
// pickedAmount - is the CLASS of the span
jQuery(function($){
$('#picker').on('change', function() {
$('.pickedAmount').text($(this).val());
})
});
</script>
<!-- copy this into gravity form -->

Your JavaScript solution is:
function my_fun(obj){
alert(obj.options[obj.selectedIndex].text);
}
<select onchange="my_fun(this)">
<option>item one(1)</option>
<option>item two(2)</option>
<option>item three(3)</option>
<option>item four(4)</option>
<option>item five(5)</option>
</select>

Multiple selection with checkbox multi level by jquery

Currently I want to implement drop-down list with multiple group selection checkbox but could not find the exactly one. It is something similar to this : multiple select. But unfortunately, mine has multi level parent and child as this image :
This is the structure of the code :
<select id="ms" multiple="multiple">
<option value="1">Parent 1</option>
<option value="2"> > Child 1</option>
<option value="2"> > Child 2</option>
<option value="4">Parent 2</option>
<option value="5">Parent 3</option>
<option value="2"> > Child 1</option>
<option value="2"> > Child 2</option>
<option value="2"> > Sub Parent 3</option>
<option value="2"> >-> Child 1</option>
<option value="2"> >-> Child 2</option>
</select>
I don't use <optgroup> because I don't want to modify the structure of the code since all the code of the dropdown list is the structure that received from server side.
When all the children are selected, the parent would be selected too.
When all the children are selected, there should be only parent's name that showed in the selected filed.
If one of children is deselected , then the parent would be deselected too.
The sub level should work as the 1st level as well.
Is there any recommend plugin jquery for this?
Any answer would be appreciated.

This is totally messed up, but you can always try to do this way:
Find the posision of check option by getting its position on a list like in this post
Make all if/else statments which requires:
Get the possition of my parent
and if all my siblings are checked: check my parent and get rig of all other scopes

Show/Hide Div (a long list) on Select

There are many solutions to show/hide on select in stackoverflow, and almost all of them help when the number of select and divs are small finite number. I am looking for a solution when the select list is really long, maybe over 40 and there are equivalent number of divs.
Is there a generic way to enable show/hide in this situation.? However, If there are SO posts on this, please point them to me.
Here is my HTML structure...
<div class="form-group">
<label class="col-md-4 control-label" for="changeType">Type of Change</label>
<div class="col-md-4">
<select id="changeTypeSelect" name="changeTypeSelect" class="form-control">
<option value="">--- SELECT ---</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
..
...LOT MORE HERE...
.....
<option value="2">three</option>
</select>
</div>
</div>
<div id="1" class="changeTypeDiv">
<hr>
<h1>ONE</h1>
</div>
<div id="2" class="changeTypeDiv">
<hr>
<h1>TWO</h1>
</div>
...
....LOT MORE HERE.....
...
<div id="3" class="changeTypeDiv">
<hr>
<h1>TWO</h1>
</div>
I need to be able to show a DIV on select and hide the rest.
UPDATE to question
If I had more than one select option boxes, do I need to replicate the script or write new function...here is what I tried to do, but it does not work.
DISCLAIMER - It might be evident that I don;t have much insight into coding :)
$(function() {
$(".changeTypeDiv").hide();
$("#changeTypeSelect").change(function(){
$(".changeTypeDiv").hide();
$("#"+$(this).val()).show();
});
$(".addGUIdiv").hide();
$("#addedGUIselect").change(function(){
$(".addGUIdiv").hide();
$)"#"+$(this).val()).show();
});
});
The above does not work..making me guess, I might need a new function..please help.
Thanks
Brijesh.

You can do like this,
$(".changeTypeDiv").hide();
$("#changeTypeSelect").change(function() {
$(".changeTypeDiv").hide();
$(".changeTypeDiv").eq($(this).val() - 1).show();
});
Here I am taking the index based selection..
Fiddle
Other Possible solution is to give a data-attribute to the div elements. Then show the proper div accordindg to the selection.

You need to create a relation between selected value and div.
as per your comment, Since you have defined the relation. IDof div is same as value of select.
you can use it like
HTML
<select id="changeTypeSelect" name="changeTypeSelect" class="form-control">
<option value="">--- SELECT ---</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<div id="1" class="changeTypeDiv">
<h1>ONE</h1>
</div>
Script
$(".changeTypeDiv").hide();
$("#changeTypeSelect").change(function(){
$(".changeTypeDiv").hide();
$("#"+$(this).val()).show();
});
DEMO

Hide all of them then show the one with id = value of select event.
$(".changeTypeDiv").hide(); // Hide all
$("#changeTypeSelect").change(function(){
$(".changeTypeDiv").hide();
$("#" + $(this).val()).show();
});

how to show the content of one drop down dynamically on changing the value of another drop down in smarty

I'm new to php and open to any kind of suggestions regarding this issue...
I have a nested php array something like this....
category1->0->name
category1->1->name
category2->0->name
category2->1->name
......................
......................
I want to show 2 drop downs in smarty template file.
first one is a category drop down i.e. category1, category2.
second one is dependent on first. So, if I select category1 in first drop down then it should show me all the names associated with category1 and so on....
I am not using Jquery, instead I'm working with just javascript.
Can anyone please provide me sample code to do this?

<!--JAVASCRIPT-->
<!--CREATE DROPBOX WHEN CAT1 IS SELECTED-->
<script>
var category = document.getElementById("category").value;
if(category == CAT1){
document.getElementById("subcat").innerHTML='
<select name="subcategory" type="text" id="subcategory">
<option value=""></option>
<option value="Sub1">Sub1</option>
<option value="Sub2">Sub2</option>
<option value="Sub3">Sub3</option>
</select>"
';
}
</script>
<!--HTML MARKUP-->
<select name="category" type="text" id="category">
<option value=""></option>
<option value="CAT1">CAT1</option>
<option value="CAT2">CAT2</option>
<option value="CAT3">CAT3</option>
</select>
<!--SPACE TO PLACE DROPBOX FROM JAVASCRIPT-->
<span id="subcat">
</span>

AngularJS - extra blank option added using ng-repeat in select tag

I have a listbox that I am creating with a select, using AngularJS ng-repeat. The listbox is created correctly, and when I select one of the items and click my button, I get to the function and have the information I need.
My html code is as follows:
<select size="6" ng-model="item" ng-options="s.name for s in itemlist"></select>
<button class="btn tt-btn-blue" ng-model="singleModel" ng-click="onLoadClicked(item.id)">Load</button>
My problem is that when the listbox paints, it has one item at the top that is blank. When I inspect the listbox during a run in Chrome, I get the following output in the console:
<select size="6" ng-model="item" ng-options="s.name for s in itemlist" class="ng-pristine ng-valid">
<option value="?" selected="selected"></option>
<option value="0">Item 1</option>
<option value="1">Item 2</option>
<option value="2">Item 3</option>
<option value="3">Item 4</option>
<option value="4">Item 5</option>
<option value="5">Item 6</option>
</select>
I am wondering how I can get rid of the first option inserted by the ng-repeat. I don't want to see a blank space at the top of the listbox. I realize one option would be to set the first actual option (value="0") as the selected item, but I would rather have no selected items to start.

Any time you see <option value="?" selected="selected"></option> in the select, it means that your ng-model is set to a value that isn't in the ng-options. So, if you don't want the blank option, you need to make sure item is set to a value in your itemlist. This could be as easy as having the following in your controller:
$scope.item = $scope.itemlist[0];
This will give it an inital value, and then angular will update it for you thereafter.

simplest way to make sure that automatically added option by angular is hidden is ng-if directive.
<select ng-options="option.id as option.description for option in Options">
<option value="" ng-if="false"></option>
</select>

I have found the solution after a long RND
Please find the following code it will work for you.
Here is the HTML Code
<div class="col-xs-3" ng-controller="GetUserADDetails">
<label>Region</label>
<select id="DDLRegion" ng-model="selectedregion" class="form-control" ng-change="getBranched(selectedregion)">
<option value="" >--Select Region--</option>
<option ng-repeat="region in Regions" value="{{region.LookupID}}">{{region.LookupValue}}</option>
</select>
</div>
Here is the Module Code
var app = angular.module("UserMasterModel", [])
.controller("GetUserADDetails", function ($scope, $http,$log) {
$http({
method: 'GET',
url: '/UserMaster/GetAllRegion'
})
.then(function (response) {
$scope.Regions = response.data;
//$log.info(response);
});
});