Html select not working

Html.DropdownListFor selected value not being set

How can I set the selected value of a Html.DropDownListFor? I’ve been having a look online and have seen that it can be achieved by using the fourth parameter so like the below:

@Html.DropDownListFor(m => m, new SelectList(Model, "Code", "Name", 0), "Please select a country") 

 Please select a country United Kingdom United States . 

But for some reason United Kingdom remains selected but I want «Please select a country» to be selected. Anyone know how I can achieve this?

EDIT

I’ve updated my code as there was a slight change in functionality however still seem to be encountering this problem. This is what is in my view:

@Html.DropDownListFor(n => n.OrderTemplates, new SelectList(Model.OrderTemplates, "OrderTemplateId", "OrderTemplateName", 1), "Please select an order template") 

1 is the Id of the option that I want selected, I have also tried with the text of the option but that also does not work. Any ideas?

13 Answers 13

Your code has some conceptual issues:

@Html.DropDownListFor(n => n.OrderTemplates, new SelectList(Model.OrderTemplates, "OrderTemplateId", "OrderTemplateName", 1), "Please select an order template") 

When using DropDownListFor, the first parameter is the property where your selected value is stored once you submit the form. So, in your case, you should have a SelectedOrderId as part of your model or something like that, in order to use it in this way:

@Html.DropDownListFor(n => n.SelectedOrderId, new SelectList(Model.OrderTemplates, "OrderTemplateId", "OrderTemplateName", 1), "Please select an order template") 

Aside from using ViewBag, that is not wrong but there are better ways (put that information in the ViewModel instead), there is a «little bug» (or an unspected behavior) when your ViewBag property, where you are holding the SelectList, is the same name of the property where you put the selected value. To avoid this, just use another name when naming the property holding the list of items.

Some code I would use if I were you to avoid this issues and write better MVC code:

public class MyViewModel < public int SelectedOrderId public SelectList OrderTemplates // Other properties you need in your view > 

public ActionResult MyAction() < var model = new MyViewModel(); model.OrderTemplates = new SelectList(db.OrderTemplates, "OrderTemplateId", "OrderTemplateName", 1); //Other initialization code return View(model); >

In your View:

@Html.DropDownListFor(n => n.SelectedOrderId, Model.OrderTemplates, "Please select an order template") 

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simple html not working (dropdown not opening) in Windows Subsystem for Linux #15413

Simple html not working (dropdown not opening) in Windows Subsystem for Linux #15413

Comments

Electron version: 3.0.3
Operating System: Windows Subsystem for Linux
WIndows 10 Pro — Version 10.0.17763 Build 17763

Expected Behavior
A regular html select should appear and should be openable with a mouse click, showing all the options.

Actual behavior
The html select is there but clicking does nothing, I only see a change in the border/coloring. See attached screenshot. At first I thought it was a CSS library issue (using Bulma first and then Spectre), but event with an unstyled item the problem persists.

To Reproduce
Clone the electron-quick-start sample and put a simple html select in the body inside the index.html file:

 
 option 1 option 2 option 3  
 

Screenshots

The text was updated successfully, but these errors were encountered:

Источник

Select option selected keyword not working

Welcome to Stack Overflow! Please visit the help center, take the tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a minimal reproducible example of your attempt, noting input and expected output. «Not working» is not a very useful description of a problem.

selected attribute is useless in Angular : you must provide your ngModel with the default value you want.

«it’s not working» does not clearly explain what is your problem. Please make sure to provide any proper error messages you get.

no any error message, already bind array’s data, but i want to set a default value for the drop-down list

1 Answer 1

You are binding ngmodel of array object, which is incorrect. I have created a sample example, please check on stackblitz I created addressDetail object to bind the with ngModel. please check the html below. Here is the component code.

addressTypeDetails = [,] addressDetail =

are you talking about default selected value, I have set the default value in addressTypeId field and that is selected on the screen. please check the stackblitz example.

I have updated the code, the changed code is: if there is no value then it is null and set null value in the option element.— select an option —

Yes that also work, but just for your info, as a practice should follow null for non dB text. Because if server return null value then this will not work, I am talking about application level not for this case.

Источник

:read-only selector not working on select tag?

I’ve been trying to make select tag read only means it should not be selectable, when i try to add attribute readonly it works fine but it is also applying on select tag which do not have readonly attribute, i think i’m not applying selector properly, I cannot set it disabled because it won’t submit along with form details, this is what i’ve tried in w3school editor :-

select:-moz-read-only < /* For Firefox */ pointer-events: none; >select:read-only

 
ACCEPTED
 1 2 3  
 
UNACCEPTED : selector also applying here
 1 2 3 

2 Answers 2

You need to assign a unique identifier such as a class or an id to specifically make the first select tag readonly and not both.. for example, here, am using tag and an attribute selector to select the tags which have readonly attribute

select[readonly]:-moz-read-only < /* For Firefox */ pointer-events: none; >select[readonly]:read-only

 
ACCEPTED
 1 2 3  
 
UNACCEPTED : selector also applying here
 1 2 3 

The selector you are using is a tag selector and will select any select tag and turn it into readonly.

Adding some details based on the comments,

You can disable the tab focus by using tabindex attribute with a value set to false on the select tag

Also, you should not rely on the data passed from the client side if it’s meant to be readonly. You need to have a proper validation in place in the backend which will prevent a user from passing any false or malicious data. No matter what you use, simple HTML CSS solution like above or disabling keys using JavaScript, you cannot prevent the user to not to alter the value of the tag.

Источник

Click event is not working on html select option tag in chrome browser

I want to fire a click event(not change event) on select option tags. Click event on select option tag only works in firefox not in google chrome. I have spend a lot of time to resolve this issue still not successfull. Anyone can help me to resolve this problem. Thanx in advance.

Sounds like a XY problem, why cannot you use change event? And ya, on chrome, you cannot bind any mouse event to option elements

I have multiple dropdowns and a video container. On select option I have to show video related to selected option in video container. Now If I select option from first select dropdown then the video will be shown in video container and then I select option from second dropdown then video will be changed. Now If I go back to first option and click on already selected option to watch its video, here the change event will not work.

2 Answers 2

Try editing the onclick function of the select tag to call to the option tag’s onclick . The problem now is that it may call twice in FireFox.

function getSelectedOption(select)

 foo bar  function log(text) < document.getElementById('display').innerHTML = text; >function getSelectedOption(select) 

Also, the problem with this is that the onclick is fired once for clicking the option and another for selecting (then firefox comes around for another). So, the best way I found to patch this is to change it to an onchange for the select tag.

But sadly that only gets rid of the initial click, not FireFox’s correct way of clicking.

So, if we modify our getSelectedOption function to check if the browser is chrome then we can cover our selves!

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1; 

Our new function can look like the following.

clickSelectedOption(select)

 foo bar  var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1; function log(text) < document.getElementById('display').innerHTML = text; >function clickSelectedOption(select) 

Источник