Develop Reference

click specific option using javascript or jquery

I tried googling this but I am getting only on event trigger searches instead of what I am looking for.
I want to dynamically click on any of the options in the select dropdown by using the value or the text if possible.
HTML
<select id="certainspamselectid" name="certainspamselect" style="margin-left: 165px;">
<option value="0">permanently deleted</option>
<option value="4">moved to admin quarantine</option>
<option value="1">moved to junk email folder</option>
<option value="5">delivered to inbox with tag</option>
<option value="2">delivered to inbox</option>
</select>
I am not sure if I need to use something with $("#certainspamselectid").click..... but I am not sure what to use after click. I would have tried more things but my google searches keep pinpointing me for on event triggers when I just want to click on one of these options using either JS or jQuery.

I have read your problem and honestly, I can't understand what you want exactly.
However, it looks like you want to select some certain option of the select dropdown.
If that's right, you don't need to call some kind of click function.
You can do it easily with jQuery.
For example, imagine that you are going to select third option - "moved to junk email folder". Then you can select it by code like below.
$("#certainspamselectid").val(1);
If my answer is not enough for you, let me know detail of your problem.

With <select> what you need is .change instead of .click
Here is a quick example .. change the $value and check again
$("#certainspamselectid").on('change' , function(){
console.log("Value Changed To: "+$(this).val());
if($(this).val() == 5){
console.log("value 5 is selected");
}
});
let $value = 4;
$("#certainspamselectid").val($value).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="certainspamselectid" name="certainspamselect" style="margin-left: 165px;">
<option value="0">permanently deleted</option>
<option value="4">moved to admin quarantine</option>
<option value="1">moved to junk email folder</option>
<option value="5">delivered to inbox with tag</option>
<option value="2">delivered to inbox</option>
</select>

why don't you simply change the value of the select like this
$("#certainspamselectid").val(4)
It will automatically show the text from the selected option
I don't think that clicking on an option would help you

Reset text field on Mouse press / Input - jQuery UI Autocomplete

Simple JS fiddle containing my code in working state
I have a jQuery UI Autocomplete field, with a Dropdown button attached. It works floorlessly, however - its kinda annoying you have to manually delete the words inside the field for a search.
I am unsure if jQuery UI has a feature for it, unless i'd love to know.
I've tried to use onClick functions with JS, however since my field is not exactly an "form field" I've got kinda lost here.
My goal is to: reset the text field when a user presses it.It has prewritten text in it "Please select (Or Type)"
my cshtml file looks as following
cshtml
And it looks like this on the browser browser
Code for Image 1:
<select asp-for="Dinosaur" class="combobox" id="dinoType" asp-items="Html.GetEnumSelectList<Dinosaurs>()">
<option selected="selected" type="text" onclick="resetText()" value="0">Please select (Or Type)</option>
</select>
<span asp-validation-for="Dinosaur" class="text-dark" />
As you can see it has the text in, which i have to CTRL + A, DELETE before i can search in my field.
A function to clear this text when a user presses it will easen the pressure.
I might just be stupid to see the simple solution, i just feel like I've tried some of the things that I'd believe would work. (As the onclick="ResetText()" with a JS code attached to it)
When I click on drop down this is what showing.
Best Regards,

You don't want to wire an onclick listener on your option element, you want an onchange event listener on your select element. onclick is not supported on option elements.

use onchange instead of using onclick and this action should be on the select tag. not on the options. Try this example.
$('select').on('change', function() {
if (this.value === 'disabled') {
this.value = '';
}
console.log(this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select asp-for="Dinosaur" class="combobox" id="dinoType" asp-items="Html.GetEnumSelectList<Dinosaurs>()">
<option selected="selected" type="text" value="disabled">Please select (Or Type)</option>
<option type="text" value="One">One</option>
<option type="text" value="two">two</option>
</select>
<span asp-validation-for="Dinosaur" class="text-dark" />

Disabling/Enabling html elements with AngularJS

I'm starting to learn AngularJS for a web app, and I have an issue with understanding the workflow of the framework.
I have 2 dropdowns :
<select class='selectorDropdown' ng-model='selectedElement' ng-change='selectedElementChange()'>
<option value='0' disabled selected>Option0
<option value='1'>Option1
<option value='2'>Option2
</select>
<select class='selectorDropdown' id='selector2' disabled>
<option value='3'>Option1
<option value='4'>Option2
</select>
I want the second dropdown to be enabled only after another option than Option0 has been selected on the first dropdown. So here's my Javascript code :
$scope.selectedElementChange = function() {
document.getElementById('selector2').disabled = true;
}
So far, it looks like regular Javascript (and I'm manipulating the DOM), so I guess this is not really the way AngularJS was mean to be used. Could someone help me understand the "correct" way to do this with AngularJS ?

Something like this should work, without writing a single line of JavaScript:
<select class='selectorDropdown' id='selector2' ng-disabled='selectedElement == "0"'>
<option value='3'>Option1
<option value='4'>Option2
</select>
You don't need the ng-change either. Angular takes care of updating the model when the first selector changes, and then runs a digest loop to update anything else.
You also need to initialize selectedElement somewhere; Angular doesn't take its value from the fact that you wrote selected on the Option0 element. The cleanest way is to do it in the controller:
$scope.selectedElement = "0";
The quick and dirty way is ng-init:
<select ... ng-init='selectedElement = "0"'>
Plunk.

Smaller Work around for ng-pattern on Select

I am working on an angular app and I needed to put a pattern validation on a select element. Just using ng-pattern on select didn't work. So I created a hidden input with same model with ng-pattern on the hidden input, that didn't work either. So I created a text input with the ng-pattern and hid it via css. Which works beautifully.
Is there a smaller work around for this?
EDIT1: I think I should have added that the options are generated by ng-options
EDIT2: Edited the code snippet accordingly to show what I actually want.
function formCtrl($scope) {
$scope.options = ['Please Select','Value 1','Value 2'];
$scope.price = 'Please Select';
$scope.onSubmit = function (form) {
console.log(form.$valid);
}
}
.show-none {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="formCtrl">
<form name="myForm" ng-submit="onSubmit(myForm)">
<select ng-model="price" ng-options="o as o for o in options"></select>
<input type="text" class="show-none" ng-pattern="/^(?!.*(Please Select))/" ng-model="price" name="price_field"> <span ng-show="myForm.price_field.$error.pattern">Not a valid option!</span>
<input type="submit" value="submit" />
</form>
</div>

You shouldn't use ng-pattern with hidden input field for this case, you should add value for each option, & then you should have required attribute make sure any of the option should selected before submiting. Adding name="price" will add form element to myForm object.
Markup
<select ng-model="price" name="price" required>
<option>Please Select</option>
<option value="TEST1">TEST1</option>
<option value="TEST2">TEST2</option>
</select>
Update
If you wanted to make it using ng-options then it would be something like below. You don't need to add Please Select in your array, you could add it manually inside select
Markup
<form name="myForm" ng-submit="onSubmit(myForm)" novalidate>
<select ng-model="price" ng-options="o for o in options" required>
<option value="">Please select a person</option>
</select>
<input type="submit" value="submit" />
</form>
Code
(function(angular) {
'use strict';
angular.module('staticSelect', [])
.controller('formCtrl', ['$scope', function formCtrl($scope) {
$scope.options = ['Value 1', 'Value 2'];
$scope.onSubmit = function(form) {
console.log(form.$valid);
}
}]);
})(window.angular);
Demo here

You can also just disable certain options if you didn't want it to be possible to select them in the first place:
<select ng-model="price">
<option disabled>Please Select</option>
<option>TEST1</option>
<option>TEST2</option>
</select>

Chiming in here as this is something that comes up time and time again and the suggested solutions here don't work for me. This is a really common use-case too.
I tried putting an empty option in, and it didn't work for me. I noticed that AngularJS was placing a value attribute in with the same value as the contents of the <option> tag. The select was ng-valid even with this option selected.
In my scenario I have placed the placeholder option i.e. SELECT A CENTRE as the first item in the list of locations (the scope variable I bind the options to). I hide the first item with conditional CSS, but select it initially by setting dc.user.CentreName to SELECT A CENTRE in the controller. This gives us the behaviour of it disappearing when the user has clicked any other option. Another option is to disable it which means it will still show at the top of the list but will be unselectable after selecting another item (was added in Angular 1.4x). I have also put that code in (the ng-disabled attribute), to illustrate this. You may safely remove it if you want to go the hidden route.
Next we want to use the standard Angular forms validation to ensure that some item other than the first is selected. I tried the other suggested approaches of putting in an empty option (with no value) and setting required on the select. So I went for a hidden input form element with a required and ng-pattern attribute using a negative lookahead assertion.
Note that we use ng-class to bind ng-valid and ng-invalid to the select so existing CSS styling will work.
Feels a bit hacky but it works.
<select ng-model="dc.user.CentreName"
ng-class="{'ng-valid': orderForm.centreName.$valid, 'ng-invalid': !orderForm.centreName.$valid }">
<option ng-repeat="location in locations"
ng-disabled="$index < 1"
ng-style="$index < 1 && {'display': 'none'} "
value="{{location}}">
{{location}}
</option>
</select>
<input
type="hidden"
ng-model="dc.user.CentreName"
ng-pattern="/^(?!SELECT)/"
required/>
And in the controller... (note you can also use ng-init to set the placeholder value declaratively from the view, see https://stackoverflow.com/a/13775151/4707368)
function ShoppingController($scope [...]) {
[...]
$scope.dc = {
user: {
"CentreName": 'SELECT A CENTRE',
[...]
Your CSS might look like this:
input.ng-touched.ng-invalid, select.ng-invalid
{
background-color: rgba(199, 35, 35, 0.15);
}
input.ng-touched.ng-valid, select.ng-valid
{
background-color: rgba(116, 173, 39, 0.16);
}

Dropdown with autocomplete + static values

I want to create a dropdown when you click on an icon where you can search through data. I will clarify this with an image:
You can type your quiz name on the .... rule.
Then in the second part of the dropdwon you will see the quizzes from the database depending on the search terms.
In the third part of the dropdown I want to show the last 5 surveys (this has to be static, not chaning when the search terms change).
In the fourth part of the dropdown I also want to show static values.
Is this possible to do with select2.js ?
Or can someone help me start with this? I don't really have a clue on how to begin with this. I know how you can show data according to the search terms. But it's the third and fourth part of the dropdown that I don't really know how to show also under it ...

you can use any dropdown api but if you want to autocomplete with static value you should use html5 form element "<datalist >"
here is example
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>