I have a drop down linked to a text area, so that when a choice is selected from the drop down the textarea automatically populates from the same model. A working version can be seen here: JSFiddle
What I'm trying to do is programatically change the drop down and have that change reflected in the text area. I can update the drop down by setting the value and while the dropdown appears correct the change is not cascaded to the text area. ng-change doesn't fire when the dropdown is set manually, and I cannot set the value of the text area since it's a relational product of the dropdown model.
Is what I'm trying to do possible?
<div ng-controller="Ctrl">
<div class="inputItem sectionArea">
<label>Sample List:</label>
<select class="allVars"
ng-change="selectAction()"
ng-model="allVarsDD"
ng-options="allVars.text_short for allVars in allVars"
>
<option value="">-- Select Option --</option>
</select>
<br/>
<textarea class="frequentInstructions inputLine" type="textarea" name="frequentInstructions"
ng-model="allVarsDD.text_long"
</textarea>
</div>
<div>
<script>
var app = angular.module('app', []);
function Ctrl($scope) {
$scope.allVars=[
{"fid":"1","environment":"0","text_short":"Short text 1","text_long":"text_long_1"},
{"fid":"1","environment":"0","text_short":"Short text 2","text_long":"text_long_2"},
{"fid":"1","environment":"0","text_short":"Short text 3","text_long":"text_long_3"}
];
}
</script>
I figured out the proper syntax for setting:
In this example to set it to item #1:
$scope.allVarsDD = $scope.allVars[1];
I updated the fiddle to reflect the correct usage.
Related
I'm working on creating a html form using 'Semantic UI' framework. While I'm using a normal select item for a dropdown/select list, I'm styling it using Semantic UI. Everything works fine, but once I select a value from the dropdown, I can't deselect the option/value as an end user.
Suppose in this FIDDLE , if I select 'male', and again want to de-select the option and show the placeholder/default text 'Gender', I'm not able to. Can someone help me figure out a way to make the select work as a regular html select item rather than a dropdown ?
HTML Code
<div class="field">
<label style="width: 250px">Select a Gender</label> <select
name="skills" class="ui fluid dropdown">
<option value="">Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
JavaScript Code
$(".ui.fluid.dropdown").dropdown({})
Try this :
$('select.dropdown').dropdown({placeholder:'Your placeholder'});
see Semantic UI (or Semantic UI CN for a Chinese version) for more info.
In the classic HTML <select> element, it treats your empty valued <option value="">Gender</option> as another dropdown menu item.
However, Semantic UI uses the empty valued <option> as the placeholder text. If you want Gender as a selectable option, it should really be another item that is independent of your placeholder text.
If you want the ability to clear the selection, I think there are better UX paradigms to handle this. For example, you could have an external clear selection button which calls:
$('.ui.fluid.dropdown').dropdown('clear')
Another more streamlined option might be to use the multi-selection dropdown, and limit the maxSelections = 1, the first example from the examples page. That way the user gets an impression that they have selected something, and to clear the selection they use an element within the same dropdown container.
You should know that .dropdown() in Semantic UI removes any null value from your select by default.
Nevertheless, there are some approaches to what you are looking for.
Check this fiddle.
You can achieve this with the snippet below.
<div class="ui selection dropdown">
<input name="gender" type="hidden" value="default">
<i class="dropdown icon"></i>
<div class="text">Default Value</div>
<div class="menu">
<div class="item" data-value="default">Default Value</div>
<div class="item" data-value="0">Value</div>
<div class="item" data-value="1">Another Value</div>
</div>
</div>
You can take a look at here https://semantic-ui.com/modules/dropdown.html#/examples. Also you can use 'clearable'.
If you wanna pass this value to back-end, keep in mind that the selected value is in the input.
$('.ui.dropdown').dropdown({
clearable: true
});
Could anyone tell me, how to fetch and selected items from DropDownList to Text box using javascrtipt/HTML/AngularJs.
In detail:
I've a dropdownlist which has lot of items with its.
If I click one from that list means it should displayed in new textbox after clicking add button,
If I click one more, then click add button means it should show the text box followed by previous box.. like one by one whenever I want add new items to show from dropdown..
Hope you understand. Please help me to solve this
Simple example extracted from the doc:
plnkr
JS:
(function(angular) {
angular.module('nonStringSelect', [])
.run(function($rootScope) {
$rootScope.model = { id: 2 };
})
})(window.angular);
HTML:
<body ng-app="nonStringSelect">
<select ng-model="model.id">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
{{ model }}
</body>
On select of dropdown value, the corresponding some appropriate value should be displayed in textbox. How to do this in Angular js? Like I have dropdown:
<select class="input-medium" ui-select2 name="affiliate" required ng-model="payout.affiliate.id" required gt-input-msg gt-error-msgs="gtErrorMsgs">
<option></option>
<option ng-repeat="s in affiliateList" value ={{s.id}}>{{s.affiliateName}}</option>
</select>
On select of any value I should be able to display property affiliate.points in some other div or textbox.
Kindly help me.
You could use the ngChange directive on the select element like so:
<select ng-model="selectedAffiliate" ng-change="GetAffiliatePoints(selectedAffiliate)"></select>
When the select value changes the selectedAffiliate property on your scope is updated to hold the selected value. Then you can look up the points for that affiliate and display them somewhere.
The documentation says - When a select is large enough to where the menu will open in a new page, the placeholder text is displayed in the button when no items are selected, and the label text is displayed in the menu's header. This differs from smaller overlay menus where the placeholder text is displayed in both the button and the header, and from full-page single selects where the placeholder text is not used at all.
I see 2 options here. 1, fix my code to where my label actually hides (I can't figure this out). or 2. Make the multiple select box display the placeholder in the header instead of the label.
Thanks for your help.
Here is the code I'm using:
<div data-role="fieldcontain" class="ui-hide-label">
<label for="abc" class="ui-hidden-accessible">Select</label>
<select name="abc" id="abc" multiple="multiple" data-native-menu="false">
<Option data-placeholder="true">Select Multiple</option>
<Option>Option1</option>
</select>
</div>
I'm currently using the following to display an input field when I change a dropdown menu selection:
<select id="delivery_country" name="d_country" onchange="
if (this.selectedIndex==14){
this.form['statesUSA'].style.visibility='visible'
}else {
this.form['statesUSA'].style.visibility='hidden'
};">
However, this only changes the input form element called "statesUSA".
If I want to show the div that this form element is inside, how do I do this?
For the record, my HTML reads:
<div id="usa">
<input type="text" id="statesUSA" />
</div>
Many thanks for any pointers.
use document.getElementById(id)
this:
<select id="delivery_country" name="d_country" onchange="if (this.selectedIndex==14){document.getElementById('usa').style.visibility='visible'}else {document.getElementById('usa').style.visibility='hidden'};">