Develop Reference

When click button Selectlist goes default with Javascript

<select asp-for="ProductFilter.BrandId"
asp-items="#(new SelectList(Model.ProductFilter.Brands,"Id","Name"))">
<option>Chose one</option>
</select>
<button type="button" onclick="clearRadioButtons()" class="btn btn-outline-info mt-3">Clear</button>
I have some list items and 1 default item which is "Chose One" and what i want is when i click Clear button just make select list choosen value "Chose One" how can i do this with javascript? Thanks For helping!
For example i got A,B,C,D in options and of course default Chose one and when someone chose C and after click "Clear" button i want to make it "Chose One" back.

Add empty value to the default option and add an id to the select element:
<select id="brand-select" asp-for="ProductFilter.BrandId" asp-items="#(new SelectList(Model.ProductFilter.Brands,"Id","Name"))">
<option value="">Chose one</option>
</select>
Then select default option like this:
function clearRadioButtons() {
var selectElement = document.getElementById("brand-select");
selectElement.value = "";
}

To fulfill your requirements I'll propose two solutions that should (or at least one of them) work for you.
Option 1: Default Form Behavior (let the browser do the trick for you)
For this situation I'd rather use the reset button type of the form element. The button[type="reset"] resets all* the form fields to their original values when the browser loaded the page.
Here's an example, you may choose an option from the list and then click on "Reset" to revert the list to its original state.
<form>
<select>
<option value="" selected>Choose</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<button type="reset">Reset</button>
</form>
all:* keep in mind, the button[type="reset"] will try to reset all the form fields to their original values and not only your select element.
Note: in the above example, i intentianally set the option with the text "Choose" as selected using the selected attribute in order for that option to be selected no matter what its position in the select element.
Option 1: JavaScript Workaround
In case the first solution cannot be used, here's a solution that relies on JavaScript to do the trick.
The idea here is to set a default option by specifying an ID for it (so we can easily retrieve it by JavaScript) and an Event Listener on the button that resets the list.
const list = document.getElementById('list'),
defaultOption = document.getElementById('default-option'),
resetBtn = document.getElementById('reset-list');
// listen for "click" events on the "Reset" button
resetBtn.addEventListener('click', e => {
/**
* the below line is required only when you use a link (for example) instead of a button or the button type is different from "[type=button]".
/* The role of that line is to prevent the default behavior of the clicked element. In case of a link, the line prevents the unwanted jump on the page as the browser tries to follow the link and it scrolls the page all the way to the top (or simply follows the link if an "href" attribute is set on the "a" tag).
*/
e.preventDefault();
// reset the list
defaultOption.selected = !0;
});
<select id="list">
<option value="" id="default-option" selected>Choose</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<button type="button" id="reset-list">Reset</button>
I recommend using the selected attribute on the option you want to be reselected once the "Reset" button is clicked.

How to pass the value of a component up to its parent?

I want to bind the value of a select element in a Svelte component (Form.svelte) to the variable active in its parent (App.svelte). I've tried using bind:value={active} on the Form component in App, but this doesn't work because I need to access the select's value. How should I access the value of the select element? Thanks in advance.
Minimum working example: https://svelte.dev/repl/bc872132e21f4071abe5a255728fb0ec?version=3.43.0

You need to expose the value property if you want to bind to it. Here, we also bind the value property to the select element so that it is updated with changes to the select.
/* Select.svelte */
<script>
export let value
</script>
<select bind:value>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
You can then bind to it in your parent
/* App.svelte */
<script>
import Select from './Select.svelte'
let active;
</script>
<Select bind:value={active}/>
<p>{active}</p>
REPL

why does ReactJS suppress changes in <input> elements but not in e.g. <select> elements

Here's a SSCCE to illustrate my question:
const React = require('react');
const App = React.createClass({
getInitialState: function() {
return {
text: 'foo',
selection: 'apples'
};
}
, render: function() {
return (
<div>
<div>
<input type='text' value={this.state.text}/>
</div>
<select>
<option value='bananas' selected={this.state.selection==='bananas'}>bananas</option>
<option value='apples' selected={this.state.selection==='apples'} >apples </option>
<option value='onions' selected={this.state.selection==='onions'} >onions </option>
</select>
</div>
);
}
});
The above React component when rendered, displays (unsurprisingly) the below view:
The model is taken into account as expected.
When one tries to type into the <input> element nothing happens. The explanation is that ReactJS uses one way flow and you have to add onchange listeners to update the model etc. That's fine.
What I don't get is why ReactJS prevents the <input> element from changing and forces it to always reflect the model value that flowed down to it, whereas at the same time it allows me to change the <select> element:
Apparently my mental model is lacking. What am I missing ?

You're hard coding the value to be this.state.text so it will always be the same on every keystroke. See the forms documentation.

What you have here is a controlled <input> element and an uncontrolled <select> element. See controlled components
Its possible to create an uncontrolled text input by not specifying the value prop.
And its possible to create a controlled select element by specifying the value prop.
<select value={this.state.value}>
<option value="bannanas">bananas</option>
<option value="apples">apples</option>
<option value="onions">onions</option>
</select>
There is documentation explaining specifically this. See here

Javascript: Get selected option from list and paste it on a label tag

I have a list of countries, html, they have numeric ids and country name:
Ex:
<select name="userDto.nationality" id="userDto.nationality">
<option value="">Seleccione</option>
<option value="1">Alemania</option>
<option selected="selected" value="2">Argentina</option>
<option value="8">Australia</option>
<option value="9">Austria</option>
<option value="10">Bélgica</option>
<option value="11">Bolivia</option>
</select>
Im trying to use a jquery script to get the country of the list, not the value, the name and paste it inside of a label.
$(document).ready(function() {
$("#userDto\\.nationality option:selected").click(function() { $("#nationalityLabel").html(this.value); });
});
And the HTML that should get the country name is:
<div name="userLabelDiv" id="nationalityUserLabelDiv">
<label class="required">Nacionalidad :</label>
<label id="nationalityLabel"></label>
</div>
Could someone guide me through the problem? I cant find where is my error in the JS code.
Thank you

Two little things:
change selector from $("#userDto\\.nationality option:selected")
to $("#userDto\\.nationality")
change event handler from click to change
Done.
$(document).ready(function() {
$("#userDto\\.nationality").change(function() {
$("#nationalityLabel").html(this.value);
});
});
Why:
Your current code would have worked, but only for "Argentinia" since it is selected by default. With your selector option:selected you bound the event handler only to selected option elements, which is, Argentinia.
So you need to add an event handler to the select element itself. The change handler fires whenever you change the selection. I guess that is your desired result.

jQuery show/hide multiple 'Other' input fields based on select drop down

I am using the follwoing jQuery to show/hide an 'Other' title field on page:
$('label[for=customerTitleOther], #customerTitleOther').hide();
$('.jTitle').change(function() {
if($(this).val() != 'Other') {
$('label[for=customerTitleOther], .jOther').hide();
}
else {
$('label[for=customerTitleOther], .jOther').show();
}
});
The field & associated label are hidden by default. However, the application i am building has scope for multiple entries on the same page so there may be multiple other fields like. Any ideas on how to extend the jQuery to cope with any number of 'Other' fields on page?

Well, it's not trivial, but what I've implemented is a "toggleOnSwitch" mechanism. Fragments of the page are annotated with the class name "toggleOnSwitch" and another class that tells what <option>, checkbox, or radio button determines visibility. The event handlers attached to the "toggler" elements (that is, the <options> or input fields) add or remove a particular class from the "toggled" elements, and (when switched "off" make sure that input fields are marked as "disabled" and a couple of other book-keeping tasks like that.
One trick is that when the "toggler" element is something like an <option> or a radio button input, when one element is toggled "off" the code has to check to see whether another element is toggled "on". That's because there's no event logged when one radio button loses the "checked" setting because another one has been clicked.
I've been thinking about posting my code for this, but it'd have to be cleaned up a little and stripped of one or two specialized hacks for my own application. Also, I'd want to make it use John Resig's "metadata" plugin instead of the cheesy version I did myself (before I knew "metadata.js" is available).

To answer my own question:
$(".jTitle").change(function(){
//set the select value
var val = $(this).val();
if(val != "Other") {
$(this).nextAll('.jOther').hide();
} else {
$(this).nextAll('.jOther').show();
}
})
With the HTML being:
<td>
<select id="titleDepend1" class="inlineSpace jTitle">
<option value="Please select">Please select...</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
<option value="Other">Other</option>
</select>
<label for="otherDepend1" class="inlineSpace jOther">Other</label>
<input type="text" class="text jOther" name="otherDepend1" id="otherDepend1" maxlength="6" />
</td>
So all the following elements with class jOther will be shown onChange.