I'm having a kind of freak error in my MVC4 proyect. While trying to validate every page with the W3C Markup Validator I found out that one of the selects in the one page is invalid, for obvious reasons (missing the starting < for Wester Sahara)
<select id="PER_Citizenship" name="PER_Citizenship">
<option value="">Please select</option>
<!-- more options -->
<option value="we">West Bank</option>
option value="eh">Western Sahara</option>
<option value="ye">Yemen</option>
<!-- more options -->
</select>
It gets interesting because the select is being built by the Html.DropDownListFor method. Furthermore, I'm using the same object as parameter to fill the list for 5 more selects in the same page and they all render properly.
#Html.DropDownListFor(model => model.PER_Citizenship, (SelectList)ViewBag.Countries)
This is not the first or the last time in the page the ViewBag.Countries is used, so I'm at a loss to find out why this happens.
Has anyone experienced this issue ever? Did you come up with some solution?
Thanks a lot!
Related
I'm creating a fluid form <select> box. Making an option pre-selected results in output 1.
1. <option value="x" selected="selected"> Option text </option>
Is there a way to make the output instead render like this?
2. <option value="x" selected> Option text </option>
I'm using Typo3 with the mdBootstrap material design framework, and its javascript requires format 2.
I've tried both the automatic generation of options and preselected options
<f:form.select name="mySelectBox" options="{selectOptions}" value="{optionSelected}"/>
and the manual format with additionalAttributes
<f:form.select name="mySelectBox">
<f:for each="{selectOptions}" as="optionText" key="optionVal">
<f:if condition="{optionSelected}=={optionVal}">
<f:then><f:form.select.option value="{optionVal}" additionalAttributes="{selected:true}">{optionText}</f:form.select.option></f:then>
<f:else><f:form.select.option value="{optionVal}">{optionText}</f:form.select.option></f:else>
</f:if>
</f:for>
</f:form.select>
But I can't set additionalAttributes without using key:data pairs, which results in the output of
selected=""
not
selected
Any kind person got any ideas please?
Thanks for your time reading this.
I'm using a combobox (select) to display countries. I doing this using Bootstrap.
This is the code
<select class="form-control form-control-user" id="inputCountry" name="country" placeholder="Country">
<option value="NL">Netherlands</option>
<option value="BE">Belgium</option>
<option value="LX">Luxembourg</option>
<option value="GR">Greece</option>
<option value="NO">Norway</option>
</select>
When I go to my browser, my combobox is empty. When I click it I can see the entries. When I select an entry, nothing shows in the combobox. When I try to echo the value of the combobox, I get the value, so it's a visual issue.
removing 1 of the classes (form-control or form-control-use) will fix this, but the design I want gets lost.
Is there any way to fix this?
I have tried your code block and it was working without a problem.
This is the JSFiddle link which I have done some modificatoins:
https://jsfiddle.net/mw5904uf/
Here, I have created form-control-user css class. I am not sure that this is what you want. Anyhow make sure you have linked css and js files correctly as Charlene said.
In addition, since your placeholder didn't work, I have modified that by adding another option.
I have a simple form with some select options that need to do stuff when the options are changed (create new form elements). This all works fine, however when a select option is chosen and the user clicks elsewhere on the page (either another form option or a blank area of the page) the text of the chosen option remains highlighted blue.
I've used select's before and not had this problem, however they weren't linked to the .change function. Is that something to do with why this is happening? Has anybody encountered this issue before? All help greaty appreciated! Code is below...
<div id="container1" class="form-group">
<label class="control-label">Select an option</label>
<div>
<select class="form-control" id="mySelect">
<optgroup label="A">
<option value="1A">Option1A</option>
<option value="2A">Option2A</option>
<option value="3A">Option3A</option>
<option value="4A">Option4A</option>
</optgroup>
<optgroup label="B">
<option value="1B">Option1B</option>
<option value="2B">Option2B</option>
<option value="3B">Option3B</option>
<option value="4B">Option4B</option>
</optgroup>
</select>
</div>
</div>
I've seen the issue brought up here
Remove Blue highlighting of option
However I don't think this quite describes my problem, as it seems to me that that person wants to remove the blue highlighting whilst using the form (hard to be 100% sure though). I don't mind the blue highlighting being there when using the form, I just want it to stop persisting when you stop using the form and do something else on the page.
UPDATE: Problem only seems to occur in Internet Explorer (tested versions 9, 10 and 11). Tested in Chrome and issue doesn't occur. Just to elaborate on the comments, the issue has nothing to do with JS (so I have removed the JQuery code and subsequent tags). The issue occurs when using optgroups in a select form. Loading the HTML outlined above into IE produces the error.
I am not able to search for a solution for this in google. Maybe some will help me here.
Here is the HTML code for the combo box, I need to choose Application Acknowledgement
<select class=”form-control” data-bind=”options: UniqueCorrespondenceTemplates,value: SelectedLetter, optionsCaption:’-- select -- ‘”>
<option value=””>-- select --</option>
<option value=”Application Acknowledgement”>Application Acknowledgement</option>
<option value=”Pend”>Pend</option>
<option value=”Withdraw”>Withdraw</option> </select>
after that, two buttons will appear, Validate and Cancel..
Here's the validate button
<button class=”btn btn-success” data-bind=”click:validation,
visible: $root.canShowValidate() && !$root.ShowConfirmation()”>Validate</button>
I tried looking for the classname, but I does not appear in the loop. Maybe I did wrong. the code I used is in the office. I also tried parent.exep, the javascript trigger, gives a error. I found at google that this is a knockout js, but I don't know what that means.
Can anyone help me call/trigger those dropdown menu and button?
I have been hitting a brick wall on this for about an hour now. I have a list of counties that I build and add to my view data (counties) and then render the list with a: html.DropDownList('invoice.county', counties) in my view.
It appears to render correctly but FF REFUSES to set the selected item. I have tried swapping the values out for integers (so they don't match the display text) and that did not work. FF just displays the first item in the list
<select id="invoice_county" name="invoice.county">
...
<option value="Lander">Lander</option>
<option selected="selected" value="Laramie">Laramie</option>
<option value="Larimer">Larimer</option>
...
</select>
I have trimmed the values to the ones surrounding the selected item.
Can anyone give me insight into this????
Firefox has a weird bug/feature that means if you just refresh the page, it will select the option already selected regardless of whether the selected attribute is on another option. For example, if I put in:
<select id="invoice_county" name="invoice.county">
<option value="Lander">Lander</option>
<option selected="selected" value="Laramie">Laramie</option>
<option value="Larimer">Larimer</option>
</select>
Saved and refreshed in Firefox, then put:
<select id="invoice_county" name="invoice.county">
<option selected="selected" value="Lander">Lander</option>
<option value="Laramie">Laramie</option>
<option value="Larimer">Larimer</option>
</select>
instead and just refreshed after saving, it would keep "Laramie" selected. To stop this, try Ctrl-F5 rather than just F5 or refresh.
If you are using XHTML, you need a valid attribute/value pair:
<option selected="selected" value="x">
If you are using HTML, the mere presence of the attribute is enough:
<option selected value="x">
More information on W3C.