Button clicked reset the dropdown selector - javascript

I have a selector like this:
<select ng-model="type">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
and a button:
<div class="btn action-btn" onclick="$ctrl.doSomething()">
Reset
</div>
I'm thinking how can it be made that when the button is clicked the selector to be reset to value 1 no matter which one is selected.
I guess that there must be a function to be called which must be implemented in the controller, but the selector is not connected to the controller so I don't know how that function can change the value of the selector.
Any suggestions?

Try using ng-click and set the model value inside the click event
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.doSomething = function() {
$scope.type = '1';
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="type">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div class="btn action-btn" ng-click="doSomething()">
Reset
</div>
</div>

Related

using jQuery to get selected value from form

I have a form that has a select field defined like this
The myName[] is like that because there are several repetitions in the sign-up form (the user first defines how many he wants to enter, and then that many forms are generated)
Now I would like to get the selected value using jQuery whenever somethign is selected, but as expected, it won't work: it's trying to get the info from an id, and there's more than one of this id. The result is that it's always getting the content of the first select field with the id it finds. I tried changing the id to a class, but that didn't work.
So how can I get the selected value of the select box that's actually triggering the event?
$(document).ready(function() {
$('#idOfmyName').change(function() {
var naam = $(this).find("option:selected").attr('value');
alert(naam);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="myname[]" id="idOfmyName">
<option value="jack">Jack</option>
<option value="rose">Rose</option>
</select>
Why can't you just use $(this).val(), if you want the selected Element?
But yes, when you've got multiple of the same ID, jQuery will over ever select the first one it finds - Though you do seem to know this; I've changed it to a class in this demo
$(document).ready(function() {
$('.idOfmyName').on('change', function() {
alert($(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="myname[]" class="idOfmyName">
<option value="jack">Jack</option>
<option value="rose">Rose</option>
</select>
<select name="myname[]" class="idOfmyName">
<option value="harry">Harry</option>
<option value="sally">Sally</option>
</select>
<select name="myname[]" class="idOfmyName">
<option value="edward">Edward </option>
<option value="vivian">Vivian </option>
</select>
for multiple you can do something like this
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="myname[]" class="idOfmyName">
<option value="jack">Jack</option>
<option value="rose">Rose</option>
</select>
<select name="myname[]" class="idOfmyName">
<option value="jack">Jack</option>
<option value="rose">Rose</option>
</select>
<script>
$(document).ready(function() {
var names = [];
$('.idOfmyName').change(function() {
var naam = $(this).find("option:selected").attr('value');
if($.inArray(naam,names)){
names.push(naam);
}
alert(names);
});
});
</script>
Vanilla JavaScript way to get selected value using onchange method
function getSelectedValue(val) {
alert(val);
}
<select name="myname[]" onchange="getSelectedValue(this.value)">
<option value="jack">Jack</option>
<option value="rose">Rose</option>
</select>
<select name="myname[]" onchange="getSelectedValue(this.value)">
<option value="harry">Harry</option>
<option value="sally">Sally</option>
</select>

My dropdownlist select onchange is not firing in angular js

I am very much new to AngularJS and I want to get values of OnChange of dropdownlist.
Below is my code which I tried
<div>
<select ng-controller="UserSelection as User" ng-model="User.UserSelected" ng-change="onSelectChange()">
<option value="SAP_Executive">SAP Executive</option>
<option value="Fiber_Engineer">Fiber Engineer</option>
<option value="Fiber_Lead">Fiber Lead</option>
<option value="CMM">CMM</option>
</select>
</div>
Angular code
angular.module('App', [])
.controller('UserSelection', function () {
var User = this;
User.onSelectChange = function () {
alert('change value selected');
};
});
My alert is not firing. Please suggest what I am missing here
Look here the following snippet. You have created an alias of your controller but not using it.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="App">
<select ng-controller="UserSelection as User" ng-model="User.UserSelected" ng-change="User.onSelectChange()" ng-init="User.UserSelected='--select--'">
<option value="--select--">--select--</option>
<option value="SAP_Executive">SAP Executive</option>
<option value="Fiber_Engineer">Fiber Engineer</option>
<option value="Fiber_Lead">Fiber Lead</option>
<option value="CMM">CMM</option>
</select>
</div>
<script>
angular.module('App', [])
.controller('UserSelection', function () {
var User = this;
User.onSelectChange = function () {
alert('change value selected');
};
});
</script>
</body>
</html>

Passing value between 2 dropdowns onchange. Update without click

I'm trying to build 2 separate dropdown selector with same value of options (same text)
selector 1
selector 2
<script type="text/javascript">
jQuery(function ($) {
var $set = $('#selector1, #selector2')
$set.change(function () {
$set.not(this).val(this.value)
})
})
</script>
<html>
<div style="float: right;margin-left: 10px;">
<div >
<select id="selector1" onchange=""
style="width:130px;">
<option selected diabled hidden value="">Select Volume
Type</option>
<option value="1">Auto-Weekly</option>
<option value="2">Auto-Monthly</option>
<option value="3">Custom Weekly</option>
<option value="4">Custom Monthly</option>
</select></div>
</div>
<td style="text-align: center;">
<select id="selector2" style="width:80px;">
<option selected="" diabled="" hidden="" value="0">Select Report
Period</option>
<option value="1">Auto-Weekly</option>
<option value="2">Auto-Monthly</option>
<option value="3">Custom Weekly</option>
<option value="4">Custom Monthly</option>
</select>
</td>
</html>
Problem:
Now I have used the javascript above to match the value from $set.
The issue is that I have to 'click' onto the dropdown in order to 'update'.
For example,
if i selected option value=1 in selector1, then i have to 'click' selector2 to see the updated value.
Could you please help if there are more refined solution? I am using these options differently later on, that's why I need 2 separate selectors and match them through binding.
I've tried following script, but it still required that i click to update the dropdown value.
<script type="text/javascript">
$(document).ready(function(){
$('#selector1, #selector2').on('change',function()
{
var report_answer = jQuery('#selector1').val();
var report_type = jQuery('#selector2').val();
var x= document.getElementById("selector1").selectedIndex;
var y = document.getElementById("selector2").selectedIndex;
report_type = this.report_answer;
this.selectedIndex = y;
y=report_type;
return report_type;
});
});

How to get javascript function work only in div by class?

Have a HTML / javascript :
<section class="on">
<select id="comboA" onchange="getComboA(this)">
<option value="[xfvalue_monthprice1]">100</option>
<option value="[xfvalue_monthprice2]">200</option>
<option value="[xfvalue_monthprice3]">300</option>
<option value="[xfvalue_monthprice5]">400</option>
</select>
<div id="prdiv">
<p id="prid"></p>
</div>
</section>
<script>
function getComboA(sel) {
var value = sel.value;
document.getElementById("prid").innerHTML = value;
}
</script>
Sections are more than 2. Class "on" of the section is dinamyc (on / off). How can I force the function to work only in section with "on" class?
Since you have tagged the question with jquery, You can use jquery to bind the change event only elements with a specific class name.
As the class name changes dynamically, you need to use delegation as well
$(document).on("change", "section.on select", function() {
$("#prid").html($(this).val());
});
I guess you need a javascript solution.
Here is my try:
HTML:
<section class="on">
<select id="comboA">
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
</select>
</section>
<section class="off">
<select id="comboB">
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
</select>
</section>
<div id="prdiv"><p id="prid"></p> </div>
JS:
var selCombo = document.querySelector(".on select");
selCombo.addEventListener("change", function() {
var value = this.value;
document.getElementById("prid").innerHTML = value;
});
FIDDLE

Ng-Repeat With Changing Variable

Using ng-repeat="i in getNumber(myNumber) track by $index" to repeat a specific number of times which is defined by a select object in HTML.
var number = parseInt($( "#number option:selected" ).text());
$scope.myNumber = number;
$scope.getNumber = function(num) {
return new Array(num);
}
It works perfectly. Now, I want it to update when I change the #number option:selected though. The var number receives this by doing something like this $( "#number" ).change(function() {});, but even when I put the above code block in there, the ng-repeat only changes onload.
How can I use ng-repeat with a changing variable?
Don't use a jQuery event handler, as it the event will not trigger a digest cycle unless you tell it to. You can just supply the select box a ng-model, and a digest cycle will automatically be started on a change of the select to update the bindings.
<select ng-model="myNumber">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div ng-repeat="i in getNumber(myNumber)">
I am at index: {{$index}}
</div>
JSFiddle
You could just watch the iteration number like this:
$scope.iteration = new Array(2);
$scope.$watch('repeat_num',function(new_val) {
if (new_val) {
$scope.iteration = new Array(parseInt($scope.repeat_num));
}
});
HTML
<select ng-model="repeat_num">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<ul>
<li ng-repeat="i in iteration track by $index">Value</li>
</ul>

Categories