Idea needed for dropdown implementation - menu

I have to implement the following dropdown box. The first item in the list can't selected and the data will be populated dynamically.

I think you're looking for an optgroup
<select>
<optgroup label="Choose Types">
<option>All Types</option>
<option>CAR</option>
...
</optgroup>
...
</select>

Related

How do you use Selenium Python and have it go through every select tag that is REQUIRED in a web page, and then always choose [1] or the first option?

The number of select dropdowns in the page can vary, depending on the number of files a user chooses to upload to the website (from 1 up to 12 or so). So basically, find a required select dropdown, and then after making the proper selection, move on or scroll down to the next div with a required dropdown until all dropdowns have their proper selection made so that form submission can move forward.
<select class="form-control" id="dynamic-id" required="">
<option value="">[Choose Option]</option>
<option value="random_value">ALWAYS SELECT ME</option>
</select>
...
<select class="form-control" id="dynamic-id" required="">
<option value="">[Choose Option]</option>
<option value="random_value">ALWAYS SELECT ME</option>
</select>
I tried doing it like this
try:
required_dropdowns = driver.find_elements_by_xpath("//select[#required]/option")
print(len(required_dropdowns))
for each_dropdown in required_dropdowns:
required_dropdowns[1].click()
time.sleep(2)
except:
NoSuchElementException
print("Could not find required dropdown"):
time.sleep(2)
Output prints out 36 dropdowns but it selects the proper option only for the first one.
I would really appreciate any input on how to execute this.

Angular 2 - how to select value from dropdown list and submit the value? (not showing selected value)

I want to select a value from a dropdown list and submit the selected value in mlab database.
Currently, I'm able to display all the data in the dropdown but I'm not able to select a value it just shows the "Select..." text on the button even after I select the value from the list. I'm not sure if I'm missing anything (ngModel or formControlName) - I would like to select the value from the list and then save it to the db.
Also, I have connected everything to the db as I'm able to save other input fields except this dropdown one.
Code:
<div class="dropdown">
<button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select...
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" *ngFor="let user of users" attr.data-value={{user._id}} id="person">{{ user.username }}</a>
</div>
</div>
Any help is appreciated!
I would us a select for this and do an ngFor for the options. As for submitting the data, you can use either template forms or Reactive Forms. The difference is you would use ngModel for the template forms and FormGroups for reactive forms. Then you would submit either the model or the form group to your service. If you want to not use a select, I think you can add a property in the .ts file and set the button text to that property. Then add a click event to the a tag where you update the property based on the clicked item. Hope this helps

how to select the drop down option in webpage using selenium python?

I am not able to select the drop down option in the webpage using python selenium webdriver
Pasted the HTML code of those web elements,
<td class="CR">
<select onchange="wl_recalc();" name="wl_nmode">
<option value="-1">Auto</option>
<option value="0">Off</option>
</select>
</td>
This is the image of the dropdown option which i am not able to select, i am able to click the 802.11n mode as shown in the picture by finding element by name. but i am unuccessfull in setting the option to off by selecting the element using xpath

How to show particular labels post in Drop down list on blogger?

I want to show particular labels post in drop down list for each post.it can be as below photo or show just only specific label for that post.
This code display post labels in dropdown list. Put it after <data:post.body/> tag
<b:if cond='data:top.showPostLabels and data:post.labels'>
<select>
<option value='select'><data:postLabelsLabel/></option>
<b:loop values='data:post.labels' var='label'>
<option expr:href='data:label.url'><data:label.name/></option>
</b:loop>
</select>
</b:if>
You can show or hide the list and change the default selected name from your blog posts gadget. Go to Layout > Blog Posts > Edit
But unfortunately you can't get posts number inside blog posts widget as in labels widget.

Selecting a dropdown option with no attributes with WATIR

I am having trouble selecting this with watir. I'm trying xpath and is able to try something like this
browser.element_by_xpath("select/option[2]").text
and it will return the text. but how would i select the text in the dropdown. Thanks
<select>
<option value="">--Select One--</option>
<option value="test">NAME1</option>
<option value="test2">NAME2</option>
</select>
Found out how to do it myself. Here is what i did for reference.
browser.select_list(:xpath, "select/option[2]").set(browser.select_list(:xpath, "select/option[2]").getAllContents[2])

Resources