I'm using a list to display all of the names of the application stored in the database. The problem is that I want the first element of the dropdown list to be empty.
<div class="col-lg-10">
<select>
#foreach (var item in Model.Application)
{
<option value="#item.Application_Name">
#item.Application_Name
</option>
}
</select>
</div>
At the moment the dropdown is working I just want the first element to be empty.
Related
I've been trying to figure out the way to hide every 'label' element in the html below except the first one. I've got a repeater field that adds a row with a dropdown select field and a label.
Each new row adds the select field and the label. The label id starts with 'label-repeat- ' and the suffix is dynamically generated based on the number of repeater rows, so it goes: 'label-repeat-1', 'label-repeat-2', 'label-repeat-3' etc.
The issue is that each repeater row is separately wrapped into its own div, so I'm guessing I cannot use :not(:first-child) in the case.
Here is my fiddle and below is my html:
<div class="fieldset">
<div class="status">
<label id="label-repeat-1" class="label-repeater">Status</label>
<select id="field-repeat-1" class="field-repeater">
<option value="Open">Open</option>
<option value="Closed">Closed</option>
</select>
</div>
</div>
<div class="fieldset">
<div class="status">
<label id="label-repeat-2" class="label-repeater">Status</label>
<select id="field-repeat-2" class="field-repeater">
<option value="Open">Open</option>
<option value="Closed">Closed</option>
</select>
</div>
</div>
<div class="fieldset">
<div class="status">
<label id="label-repeat-3" class="label-repeater">Status</label>
<select id="field-repeat-3" class="field-repeater">
<option value="Open">Open</option>
<option value="Closed">Closed</option>
</select>
</div>
</div>
I've been trying to use the wildcard selector to select the label with label[id^='label-repeat-'], label[id*=' label-repeat-'] which works fine, but then I'm trying to add the :nth-of-type(n+2) pseudo class to select every label except the first one and hide it, but that doesn't seem to work.
label[id^='label-repeat-']:nth-of-type(n+2),
label[id*=' label-repeat-']:nth-of-type(n+2) {
display: none !important;
}
Is there any other way to do this with CSS? Or even jQuery?
If I understand, you want to hide all except for the first label. So, you would end up with a label and 3 select boxes under it? Using the "plus" combinator in CSS is the easiest way of saying "all but the first one"...
.fieldset + .fieldset label {
display:none;
}
This rule is saying any fieldset that is followed by another fieldset (all but the first one), then the nested label under those.
The part of the view where I filter it through Car Categories:
<div class="form-group">
<select class="form-control" id="sel1">
<option value="" disabled selected hidden>Car Styles</option>
#foreach (var item in Model.CarCats)
{
<option value="#item.CarCategoryID">#item.CarCategoryName</option>
}
</select>
</div>
The part of the view where I have cars:
#foreach (var item in Model.Cars)
{
<div class="col-lg-4">
<div class="carGalleryWrapper">
<div class="carGallery" style="background:url('#Html.DisplayFor(modelItem=>item.ImagePath)') no-repeat 0 0 ">
<div class="carDetails">
<h4>#Html.DisplayFor(modelItem => item.DailyFee) / Per Day</h4>
<h3>#Html.DisplayFor(modelItem => item.Make) #Html.DisplayFor(modelItem => item.Model), Navi, Leather, ABS</h3>
<button type="submit" class="driveMore">
#Html.ActionLink("Drive Now", "Detail", null, new { id = item.CarID }, htmlAttributes: new {})</button>
</div>
</div>
</div>
</div>
}
I want to show the cars of a category when i select it from the dropdown.
Theres a few ways of going about this
Use a form and populate a new Car list serverside (server side)
submit the form with the selected category, in your method for handling your form
remove cars from your list that dont have that category etc.
A good example of this is here
In the method that takes your page model(the method that will be posted to on form submission) that is where you would filter your car list down by category. Then return the same page.
This doesnt use js so it will always work even if your user has disabled js in their browser however its not the most user friendly due to the page reloading.
Use js to call an api that takes in a category and returns a new list of cars (client and server side)
Then repopulate your frontend with the new list
My js isnt by any stretch any good but the rough idea is to create an api controller that will take in your category and return the filtered list.
look at this answer for a start here if you look at the success response of the ajax call, it builds up html and thats what you would need to do with the filtered list returned from the api
Use js and css to hide/show cars based on the selected category (client side)
Did you have a preference?
I have a webpage where this code is:
<select tabindex="8" id="custom_field_4" name="custom_field_4[]" size="4" multiple="multiple" xpath="1">
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="green" selected="selected"> green</option>
<option value="flashing" selected="selected"> flashing</option>
</select>
I need to get all the option values.
I tried
Get List Items //select[#name="custom_field_4[]"] but I get the error: List with locator \'//select[#name="custom_field_4[]/option"]\' not found.'
If you check the source code (line 333) of the Selenium library, you can see that the Get List Items keyword use list as tag name whereas in your DOM it is select. It won't match.
def _get_select_list(self, locator):
el = self.find_element(locator, tag='list')
return Select(el)
You can get all list elements using the Get WebElements keyword instead like:
${list elements}= Get WebElements //select[#id='custom_field_4']/option
You can access the value attribute of each element in the returned list.
I have a dropdown that gets its items from database. The default value to be selected in this dropdown is retrieved from a cookie.
The problem is,
1. there is an empty option tag as the first option and also,
2. the default value is not selected.
There is no issue at all when I use v1.3.16. This happens when using v1.2.0. (I have to use only v1.2.0)
How to fix this.
ASPX:
<select id="ddlItems" data-ng-model="ItemId">
<option value="-1">-- All Circles --</option>
<option data-ng-repeat="item in Items" value="{{item.AreaCode}}"
data-ng-selected="item.AreaCode==ItemId">{{item.AreaName}}</option>
</select>
Ctrl.js:
var promise = MyFactory.GetItems();
promise.then(function (success) {
if (success.data != null && success.data != '') {
var data = success.data;
$scope.Items = data.lstItems; //bind items to dropdown
$scope.ItemId = itemIdFromCookie; //select default value
alert(itemIdFromCookie); //it pops -1
}
else {
console.log(success.data);
}
}
Rendered HTML:
<select id="ddlItems" data-ng-model="ItemId">
<option value="? string:"-1" ?"></option>
<option value="-1">-- All Circles --</option>
//...other options
</select>
Try to use ngOptions instead
Like this
<select id="ddlItems"
data-ng-model="ItemId"
ng-options="item.AreaCode as item.AreaName for item in Items">
<option value="-1">-- All Circles --</option>
</select>
This happens becausedata-ng-model="ItemId" is empty when your model is App is Loaded.
To Have some initial value. you can put default value in ng-init
For Ex : data-ng-init='data-ng-model="--SELECT--";'
Or per your Array list Item which you are getting from database set one of the values.
Remember init will get triggered b/f you complete the Ajax Call.
I'm trying to using thymeleaf as the view template and i come across one problem. the code I have now is as below.
<select>
<option th:each="res: ${result1}"
th:value="${result1.NAME}"
th:text="${result1.NAME}"></option>
</select>
What I need is like this, where I dont know how to add another attribute for result2, both result1 and result2 are the list object in the controller
<select>
<option th:each="res: ${result1}"
th:value="${res.NAME}"
th:text="${res.NAME+result2.SCHOOL}"></option>
</select>
You can create a simple object with two fields for result1 and result2, if you know their relationship in the controller. Then you can use a list of that objects to iterate in html page.
<select>
<option th:each="item: ${itemList}"
th:value="${item.result1.NAME}"
th:text="${item.result1.NAME + item.result2.SCHOOL}"></option>
</select>