I am a newbie in html. My scenarios goes as below.
I have a drop down with values. My need is to navigate to respective webpage(which I have created for each values in the dropdown) on click/selection of one value.
Help me in achieving this.
I think Javascript is needed for your case...
<select onchange="document.location.href=this.value;">
<option value="https://www.stackoverflow.com">Stack Overflow</option>
<option value="https://www.google.com">Google</option>
<option value="https://www.instagram.com">Instagram</option>
</select>
Related
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 to pass a huge dataset of list of cities/ locations in a particular country to the users because it is going to be reusable.
I can simply put it in the HTML code like so:
<datalist id="cities">
<option value="Mumbai">
<option value="New Delhi">
<option value="Moscow">
<option value="New York">
<option value="Washington">
</datalist>
I feel that each time the user reloads the page, the whole thing makes the HTML file very heavy.
Can I somehow put it in the JS file and pass it to the DOM/HTML without any attached bulky code?
a) Can this be done
b) Is this a good idea in the first place?
So after some fiddling and looking around, I found a solution to the problem myself.
It involves the use of javascript.
To this piece of HTML code:
I added this simple javascript.
<script>
datalist=document.getElementById("countries");
datalist.empty();
datalist.append("<option value="India"><option value="Vietnam"><option value="Russia"><option value="Greece"><option value="New Zealand">")
</script>
And it works.
Now my next aim will be to get this append to be populated by a for next loop. That will make the code even smaller for a large data-list.
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?
newbie here, so thanks in advance for help! I have a Wordpress site with multiple taxonomies. I'd like to create a very simple form with two select boxes, one for each taxonomy. Then I'd like to use an HTML form with the get method to display posts matching the criteria they requested from the select boxes.
I'm able to do this easy enough if each of the two select boxes are filled out, I get a permalink something like:
testsite.com/?tax1=value1&tax2=value2
(ugly, I know, but it works).
What I can't figure out is what to do if they don't fill out both select boxes. Ideally it would only give the permalink for the one they fill in, so either:
testsite.com/?tax1=value1 or testsite.com/?tax2=value2
But instead I'm getting
testsite.com/?tax1=value1&tax2=Select+tax
here is my HTML
<form action="http://www.testsite.com/" method="get">
Season: <select name="season">
<option>Select season</option>
<option value="">Select season</option>
<option value="spring">Spring</option>
<option value="summer">Summer</option>
<option value="fall">Fall</option>
</select><br/>
Vacation type: <select name="vacations">
<option value="">Select vacation type</option>
<option value="beach">Beach</option>
<option value="ski">Ski</option>
</select><br/>
<input type="submit" />
</form>
I realize the answer is probably simple but I'm banging my head against a wall so any help is very very much appreciated. Thank you!
You can still pass an empty parameter like
testsite.com/?tax1=&tax2=whatever_was_selected
or
testsite.com/?tax1=whatever_was_selected&tax2=
but, you would have to preselect one of the options for them like
<option selected="selected" value="">Select vacation type</option>
This way if the form is submitted and the user didn't change their selection it should still pass the parameter of but without a value.
You can put some Javascript or Php validation to make sure both the dropdown are selected before submitting the form.
Using just HTML, I need both these dropdown's to be open. I really hope you can help me with this.
<Select> Would be the wrong way to go for this. You'll need to use javascript or look for other available controls which will allow you to keep your list visible. This is one example of the many blogs which mentions such controls.
It is a default behavior of drop-down elements.
But the <select> element have a size property where you can define the number of lines that control will be displayed. If you set a value greater than 1 the combobox will be displayed as listbox.
So you can make a JavaScript to dinamically change the size of the control to fix the viewing of the options:
<select size="1" onmousedown="this.size=4">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
You can read something about here