Hi can seem to find the solution for this one, so any help would be appreciated, thanks in advance...
simply put...
<select id="direction" title="Please choose a direction">
<option value="le">Left</option>
<option selected value="st">Striat</option>
<option value="ri">Right</option>
</select>
a simple dropdown, but the title whilst the mouse is over, doesnt show?
am i being a plank?
any ideas?
thanks for replies.
I found a away by putting it in a div and giving the div a title...
<div title="select number">
<select id="select">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</div>
Related
When I add display:none to an <option> tag with JavaScript after the page is ready, it wouldn't hide the default or the selected element, it stays on the hidden option unless I change that manually. The option 08:30 is hidden but it's still there as selected, but not an option.
Here is the HTML and there's also a screenshot:
<div class="form-floating mb-3">
<select class="form-select" id="time">
<option value="08:30" style="display: none;">08:30</option>
<option value="08:45">08:45</option>
</select>
</div>
I've tried disabling the <option> tag as well but it does the same and keeps it selected. I need it to jump into an active select option or any other option but not the one I hide or disable.
Update:
I have to use a workaround to get this working. First I've added all <option> tags to the <select> tag, then remove the ones that I don't want:
$('#time').html('
<option value="08:30">08:30</option>
<option value="08:45">08:45</option>
<option value="09:00">09:00</option>
<option value="09:15">09:15</option>
<option value="09:30">09:30</option>
<option value="09:45">09:45</option>
')
$('#time option[value="'09:00'"]').remove()
This works, although doesn't actually solve the issue (I guess that's a bug and hasn't been addressed yet). I would still appreciated an answer to improve the code.
Hello & Welcome Mohsen Salehi,
<option hidden>Hidden option</option>
It is not supported by IE < 11.
Please read more about it here How to hide a in a menu with CSS?
Edit:
You can also add disabled to prevent getting selected.
<div class="form-floating mb-3">
<select class="form-select" id="time">
<option value="08:30" style="display: none;" disabled>08:30</option>
<option value="08:45">08:45</option>
</select>
</div>
I am trying to show content depending on the option selected from the user. I tried this way
<select class="form-control" id="Intervencion" >
<option selected disabled></option>
<option (click)="show">Yes</option>
<option>No</option></select>
<div *ngIf="show"><p>Text to show</p></div>
I do not understand the problem. There is a special directive for this?
... You don't seem to know how basic HTML works. Sorry to say that, but you have to be aware of what you're doing is completely barbaric.
Here is the solution for you :
<select [(ngModel)]="intervencion">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<div *ngIf="intervencion === 'yes'">Text to show</div>
That being given, you should really follow Angular's tutorials, because that's one of the first examples they give to explain how ngModel works.
Can you have a vertical scroll in select html,,,
But keeping size="1" So when you click on the drop list it displays only around 5 options and the rest are viewed when you scroll.
I have a fiddel here
form name="#">
<div class="select-style2">
<select size="1" autocomplete="off">
<option hidden value="#">title</option>
<option value="#">2</option>
<option value="#">3 </option>
<option value="#">4 </option>
<option value="#">5 </option>
<option value="#">6 </option>
<option value="#">7 </option>
<option value="#">8 </option>
<option value="#">9 </option>
<option value="#">10 </option>
</select>
</div>
<input type="button" name="test" value="Go"
onClick="go()" id="btn">
As a previous answer points out, there isn't good styling options for select dropdowns.
However, the good news is, the answer to your question "Can you have a vertical scroll in select html" is yes. It's there by default when you have enough options in the list. But changing that number seems impossible with css.
See demo here: http://jsfiddle.net/VxNV9/1/
But you could create a custom drop down in jquery/javascript and style it however you want.
It is not possible to do in HTML. In SO, they have already discussed about this. Check It out Here.
May be there are other ways of achiving this through javascript or jQuery, with links on that page to some jQuery plugins which create a "fake" html select box that looks and behaves like one, but can have the height set.
Heres another problem...
What I want to do is target a frame to display with a dropdownbox
<p align="center"><b>Select a Site </b>
<select onchange="window.open(this.value,'','');">
<option value="">Select one</option>
<option value="http://www.altavista.com" target="iframe_a">1</option>
<option value="http://www.yahoo.com" target="iframe_a">2</option>
<option value="http://www.google.com" target="iframe_a">3</option></select>
<input type="button" value="Go"
onclick="window.open(setit.options[setit.selectedIndex].value)">
</p></form>
But when I try this it apperently doesnt work.
Hope somone can find a solution because its kinda enoying me right now.
EDIT:
I know that it is 'window open'
Can somone please correct it, thats why im asking the question.
please give code :D
or example
Cheers, -Geekz
Here's a jsfiddle that does what you want: http://jsfiddle.net/r5RBr/. The key is changing the src of the iframe. Below is the code from the fiddle.
<iframe height="300px" width="500px" id="iframe_a"></iframe>
<form>
<p align="center"><b>Select a Site </b>
<select onchange="document.getElementById('iframe_a').src=this.value">
<option value="">Select one</option>
<option value="http://www.altavista.com" target="iframe_a">1</option>
<option value="http://www.yahoo.com" target="iframe_a">2</option>
<option value="http://www.google.com" target="iframe_a">3</option>
</select>
<input type="button" value="Go" />
</p>
</form>
I have this mark us
<div class="styled-offer">
<select style="font-size:13px;" class="select offer-select" name="type">
<option selected="" class="selected" value="1">Sell Offers</option>
<option value="2">Buy Offers</option>
<option value="3">Products</option>
<option value="4">Companies</option>
<option value="5">Business Directory</option>
<option value="6">Classified</option>
</select>
</div>
Now here you can see the first option which is selected is Sell Offers. Now I want the selected option should be in red color and all rest of options should be in black color. Just like this site. Here you can see the option products is by default blue in color and when you click on the options they are black in colors. So I just want this. I want to make it in css. Not in jQuery. So can someone kindly tell me how to do this? Any help and suggestions will be really appreciable.
Update
Sorry..I can't change my markup So kindly guide me in this markup...
Hey thanks all for all of your answers but finally I got the solution. It was damn easy...
My markup was like this
<div class="styled-offer">
<select style="font-size:13px;" class="select offer-select" name="type">
<option selected="" class="selected" value="1">Sell Offers</option>
<option value="2">Buy Offers</option>
<option value="3">Products</option>
<option value="4">Companies</option>
<option value="5">Business Directory</option>
<option value="6">Classified</option>
</select>
</div>
Now my css will be like this..
<style type="text/css">
.styled-offer select.offer-select {
color: #F00;
}
.styled-offer select.offer-select option {
color: #333;
}
</style>
Try to apply your CSS class "selected" to a span, rather to the option itself:
<option selected="" value="1"><span class="selected" >Sell Offers</span></option>
http://tympanus.net/Tutorials/CustomDropDownListStyling/index.html
if u are using default drop down it is not possible try custom drop down.try this link it might helpful.