How to change dropdown list label text on click? - javascript

I have a <select> element in my HTML that is bound via ng-model to an object in the scope.
Initially I want the dropdown to read "Group..." but when the user clicks on the control I want "Group..." to be renamed to "All" so that "Group..." can never be selected, in the same sense that sites use text boxes with default text that gives you a hint to what the form is for and disappears when it gets user focus (e.g. A "Search..." field).
Here is my JSFiddle example which isn't working as I expected: http://jsfiddle.net/TXPJZ/561/
I figured that ng-onclick="myOptions[0].label = 'All'" would work, it should change the value of the data structure that populates the dropdown and thus change the dropdown options but it doesn't.
How do I make this work like I want?

ng-click is the directive you want, not ng-onclick. Using that it seems to work the way you want it to:
http://jsfiddle.net/TXPJZ/562/

Related

Jquery: Change select box value and and activate a click state

So whats going on is that I have a site that I have taken on for my work. I have two select boxes I am tying into. The problem is when you click the second select box and choose an option it uses ajax to load a second box next to it (a hierarchical select box). The code that I am using is simple and changes the value of the second box back to the "select" option state when the first box is changed. But what it is not doing is creating click state (sorry if I am saying that wrong) but in order for ajax to bring in and remove the third select box the second select box option needs to be clicked.
Is there a way for me to re-create a "click" of the select box.
Here is the jquery:
$(".state.form-select").change(function() {
$('.hierarchical-select .form-select').val('select');
});
Here is a sample fiddle. See this Fiddle
I am not entirely sure, what exactly you are looking for but I feel that this should do the trick:
https://jsfiddle.net/vuvckm3u/5/
$(".state.form-select").change(function() {
$('.hierarchical-select .form-select option:first-child').attr('selected', true);
});

How can I show a hidden DIV for a selection included with others?

I have a javascript file that when called, checks to see if a particular option is selected on a form. The form allows for multiple selections before being submitted. When a particular item is selected within the given choices it shows a hidden menu. In this case with "audits" I am able to show the hidden menu fine when just "audits" is selected from the list. However, I'm having much difficulty in figuring out how to get the menu to show when "audits" would be selected/highlighted with others. Eg: I had audits, services, someotheroption
Below you can see the code I'm currently using and that's working only when the single item is selected. Any guidance would be much appreciated.
function toggleFields(){
function toggleFields(){
if ($("#installations").val() == "audits"){
$("#dbcredentialsfield").show();
}
else
$("#dbcredentialsfield").hide();
}
Using the code you have so far, I assume you probably want something like this:
$('#installations').on('change', function(){
$("#dbcredentialsfield").toggle($(this).val() == 'audits');
});
This says; when the select element (assuming your dropdown has the id of installations) changes, toggle the visibility of the element with id dbcredentialsfield depending on if the value of the select is audits or not.

Change selectbox depending on radio button checked

I want to change the content of a selectbox based on a radio button.
I'm using AngularJS. So, my select box looks like this:
<select ng-controller="MyController">
<option ng-repeat="o in array_of_values" value="{{o.id}}">{{o.value}}</option>
</select>
Now, depending on wether my radio button is checked or not, I want a different set of values loaded in the select box.
I don't have much experience with Angular, but I suspect I could dynamically change $scope.array_of_values in MyController. Something similar to this example (official documentation)
I've seen another example, where you can change the content of a div based on a radio button, just using ng-model + ng-show
EDITED: But I have another difficulty: I really have several pairs radio button / select box, as table's rows, and they are dynamically generated. I could use plain jQuery plus a javascript function to get the id of each radio button and just change a specific select box based on the onClick event of the radio button. But I tend to think there is a more elegant way to do this, using AngularJS. Am I right?
Any clues? What approach should I follow?
Many thanks in advance
You should start by reading the doc and pick the right components.
Select angular way: https://docs.angularjs.org/api/ng/directive/ngOptions
Radio: https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
$watch the radio models and change the array_of_values values. Prefer use object agains values ({id:0, value:"value0"}).
$scope.radio = {name:"Radio1"};
$scope.$watch('radio', function(newVal, lastVal){
if(newVal.name === 'radio2')
$scope.array_of_values = values2
};
});

How to change the dropdown list value in javascript?

i have this dropdown list,
a,b,c,
and 2 radio buttons rdbButton1 and rdbButton2.WHen i click on rdbButton1 dropdownlist will appear and when i click on rdbButton2 i have to set dropdownlist value as a.how can i change dropdownlist value (i want to change it in javascript or jquery)
$('#id_of_the_option_element').val('new_value');
$('#id_of_the_option_element').html('new_caption');
$('#id_of_the_option_element').attr('selected','selected');
search how autoid works by searching "autoID asp.net" on google. This may help, too.
http://msdn.microsoft.com/en-us/library/system.web.ui.clientidmode.aspx
you should go to the source view to check how the ID's of the html elements change.

Problems with drop down list disabling

I have two drop-down select lists in my form as well as a textarea box.
The problem I am having is that, one a user creates a record, the record is then updated by another group but what I want to do, is prevent the other group from updating both select lists as well as the textarea box. I have disabled these items but when the user attempts to submit the form again, it looks like these items are not being posted and looks like the values are NULL.
I am using jQuery:
$('#DROP-DOWN1').attr("disabled", "disabled").addClass('itemDisabled');
$('#DROP-DOWN1').attr("disabled", "disabled").addClass('itemDisabled');
$('#TEXT-AREA').attr("disabled", "disabled").addClass('itemDisabled');
How I can prevent the user from modifying these items above but at the same time having the values posted?
Nice problem!
Can you hide them instead of disabling? Set visiblity to false
Another solution is to copy the values to an hidden input field. That one will get posted!
Work forward with this in mind: http://jsfiddle.net/uHQkx/
Instead of disabled try readonly.

Categories