Avoid empty select when clicking backspace using tom-select - tom-select

I have a select like:
<select id="my-select>
<option value="">All</option>
<option value="2022">2022</option>
<option value="2021">2021</option>
</select>
where All (with value "") is the default.
Basically I want the select always to have a value.
But when focussing the select and pushing the backspace button it removes the All value and the select is empty.
Can I avoid this behaviour?

Related

I want to have a select and input field in react with all the options in my JSON file or mongodb database

I have to provide a dropdown in my form with a large number of options in it but the selected options are to be shown at various places so i have to store the selected option or its id at database too.
<FormGroup>
<Label htmlFor="category">Category</Label>
<select innerRef={input => (this.category = input)} id="select" class="form-control" >
<option value="0">Please select</option>
<option value="1">Mobiles</option>
<option value="2">Television</option>
<option value="3">Washing Machines</option>
</select>
</FormGroup>
This is the gist of the form type i want, there will be other categories in somewhere around 25. I cant have 25 options opening in dropdown. I want to have something like select and input type in dropdown. Also i want to store the option selected by the user and then display it somewhere else.

AutoHotKey: How to get list of available values from drop down list?

I am trying to automate a website to get data. Usually if I know in advance what are the possible value from the drop down list, I can hard code them in my script.
But if I don't know what are the values, is there an elegant way to dynamically obtain the drop down list values?
Working sample from: https://autohotkey.com/boards/viewtopic.php?t=15574
select name="ConnectDTO.EvaluationGroupId" id="ConnectDTO_EvaluationGroupId" style="width: 260px;" required="yes" data-val-number="The field Evaluation Group must be a number." data-val="true"><option value="">Please Select</option>
<option value="4">ccpdmanagement</option>
<option value="7">AM Northern</option>
<option selected="selected" value="3">cwplanning</option>
<option value="1">mnplanning</option>
<option value="2">msplanning</option>
<option value="9">LCC</option>
<option value="6">powerquality2</option>
<option value="8">AM Southern</option>
<option value="5">tcoqueries</option>
</select>
When my script arrived on the page after loadIE(wb), is there a way to "get" the list of selection - such as ccpdmanagement, AM Northern etc...?
I know how to select them once the option is known in advance only.
pwb.document.getElementById("ConnectDTO_EvaluationGroupId").Focus()
pwb.Document.GetelementById("ConnectDTO_EvaluationGroupId").value := "1"
Thanks.

I found a solution here: https://autohotkey.com/boards/viewtopic.php?t=35467
Althought the Author stated he has a problem with the code (stated not work for some reason).
But for my purpose - to retrieve the list of all the drop down list option. It worked fine.
myDropDownList := wb.document.getElementById("your_dropdown_ID")
loop % myDropDownList.length
{
test := myDropDownList[A_Index-1].value
MsgBox %test%
}

Angular2 reactive forms select multiple attribute?

I use the following code in my app with reactive forms.
If I uncomment the [multiple] line, the Choose ... option does not set the dformControl form control object back to status INVALID.
dformControl.multiple by the way returns false. Even if I change the commented line to [multiple]="false", still switching back to the Choose ... option does NOT set the form control status to INVALID.
<select class="form-control"
[id]="dformControl.key"
[formControlName]="dformControl.key"
/*[multiple]="dformControl.multiple"*/>
<option *ngIf="!dformControl.value"
value="">
Choose ...
</option>
<option *ngFor="let opt of dformControl.options"
[value]="opt.value"
[selected]="dformControl.value == opt.value">
{{opt.label}}
</option>
</select>

Bind to the multiple property at the select level to a boolean isMultiple. Then you can change it and the select will change as well. Take a look at the this, I change it using a button. plnkr
<select formControlName="cars" [multiple]="isMultiple">
<option></option>
<option *ngFor="let car of cars" >{{car}}</option>
</select>
It seems when adding the multiple property it is affecting the required validator. I was able to just add an extra validator and it worked as expected.
Validators.compose([Validators.required,Validators.pattern('.+')]

jQuery select tag IE8 issue

I have two selects that initially render this way in both firefox and IE8:
<select id="cntctMap_PRSNL_TITL_TXT" >
<option value="Dr.">Dr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
<option selected="" value="Mr.">Mr.</option>
</select>
<select id="cntctMap_CUST_SEGM_US_RETAIL_SALES_SMA"">
<option value="01">Focus</option>
<option value="02">Prospect</option>
<option value="03">Center Of Influence</option>
</select>
So far so good as only the first select has a value returned from the server-side, the second does not.
On document load I pull the html for the second select, i.e. $("#cntctMap_CUST_SEGM_US_RETAIL_SALES_SMA").html());
In IE the returned string is:
<option selected value="01">Focus</option><option value="02">Prospect</option><option value="03">Center Of Influence</option>
Notice the 'selected' attribute
But in firefox it's:
<option value="01">Focus</option><option value="02">Prospect</option><option value="03">Center Of Influence</option>
The reason this is important to me is that I want to prepend an option, i.e.
$("#cntctMapCUST_SEGM_US_RETAIL_SALES_SMA").prepend(selectOption);
And have the prepended option value show in the dropdown box, but I only want to do this for those selects that don't have a server-side value.
In IE, I can't tell which is which since 'selected' comes back in all cases. This is also true if I use $("#cntctMap_CUST_SEGM_US_RETAIL_SALES_SMA option:selected")); In IE, it always returns a 'selected' option.
Anyone know a way around this?

As discussed in the comments, I suggest adding a special class (e.g. has-default) to selects that have server-side values. This is done on the server-side when you render the tags.
<select id="cntctMap_PRSNL_TITL_TXT" class="has-default">
<option value="Dr.">Dr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
<option selected="" value="Mr.">Mr.</option>
</select>
<select id="cntctMap_CUST_SEGM_US_RETAIL_SALES_SMA">
<option value="01">Focus</option>
<option value="02">Prospect</option>
<option value="03">Center Of Influence</option>
</select>
...
Using jQuery, you can target selects with server-side values:
$('select.has-default').prepend(selectOption);
The above statement will only prepend selectOption to selects that have the has-default class. This is more consistent because it doesn't rely on whether browsers mingle with the <option> tags.

Select the first element of a list with prototype

I have a form with 3 lists like this and I need every time one of the lists change put the others in cero 0, I need this in prototype or pure Javascript
<select id="1" onchange="resetall()">
<option value="0">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="2" onchange="resetall()">
<option value="0">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="3" onchange="resetall()">
<option value="0">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
thanks.

Here's a working demo using Prototype
Basically, it finds all select elements with the class resetOthers, and listens for the onchange event (don't use the onchange HTML attribute - it's cleaner to add the JavaScript behavior via JavaScript once the page has loaded).
When a select changes, it loops through the select elements, and sets each to the value of the first option (except for the one that triggered the event, of course).