Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm trying to create a website that has a drop down menu which is coded like:
<form>
<select name="languages">
<option></option>
<option value"html">HTML</option>
<option value"css">CSS</option>
<option value"js">JavaScript</option>
<option value"csharp">C#</option>
<option value"php">PHP</option>
<option value"java">Java</option>
<option value"phython">Phython</option>
</select>
<br><br>
<input type="Submit">
</form>
And in an ideal world, I'd want the relevent information to be displayed on the same page as the drop down menu. So when a user selects the HTML option, all the information for that will be displayed on the page, then if they choose the PHP option, the HTML information will be cleared and the PHP information will be loaded in.
I have added some Jquery and CSS to your codes. Besides you forgot "=" in your value field. The solution is to get the value from select and use it to decide which Id has to be shown. Please run the code snippet and see the result.
var id;
$("#languages").on("change",function(){
id=$(this).val();
$(".section").hide();
$("#"+id).stop().show();
})
.section{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select name="languages" id="languages">
<option></option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="csharp">C#</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="phython">Phython</option>
</select>
<br><br>
</form>
<div class="section" id="html">html content here</div>
<div class="section" id="css">CSS content here</div>
<div class="section" id="js">js content here</div>
<div class="section" id="csharp">csharp content here</div>
<div class="section" id="php">php content here</div>
<div class="section" id="java">java content here</div>
<div class="section" id="phython">phython content here</div>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
If you run the code you will see a drop down menu with a bunch of different languages. If you select the language AND hit submit, the drop-down menu will automatically go back to the top of the list instead of staying on what you selected. So what I'm trying to do is make the language bar stay to that language after you hit the submit button.
<body>
<header>
<div id="country-select">
<form action="" method="get">
<select id="locale" name="locale">
<option value="en_US" title='1'>English(US)</option>
<option value="en_GB" title='2'>English(UK)</option>
<option value="bg_BG" title='3'>Bulgarian</option>
<option value="cs_CS" title='4'>Czech</option>
<option value="da_DK" title='5'>Danish</option>
<option value="de_DE" title='6'>German</option>
<option value="ek_GR" title='7'>Greek</option>
<option value="es_ES" title='8'>Spanish</option>
<option value="et_ET" title='9'>Estonian</option>
<option value="fi_FI" title='10'>Finnish</option>
<option value="fr_FR" title='11'>French</option>
<option value="hu_HU" title='12'>Hungarian</option>
<option value="it_IT" title='13'>Italian</option>
<option value="lt_LT" title='14'>Lithuanian</option>
<option value="lv_LV" title='15'>Latvian</option>
<option value="nl_NL" title='16'>Dutch</option>
<option value="no_NO" title='17'>Norwegian</option>
<option value="pl_PL" title='18'>Polish</option>
<option value="pt_PT" title='19'>Portugese</option>
<option value="ro_RO" title='20'>Romanian</option>
<option value="sk_SK" title='21'>Slovak</option>
<option value="sl_SL" title='22'>Slovenian</option>
<option value="sv_SE" title='23'>Swedish</option>
</select>
<input value="Select" type="submit" />
</form>
</div>
</header>
<script>
// creates the page dynamically
function GetSelectedItem() {
var option = document.getElementById("locale").value;
}
</script>
</body>
You need to implement a few more pieces of code in order for this to happen the way you desire. Right now, hitting submit does absolutely nothing. The next time your page is loaded, the select box defaults to the top option because it doesn't remember what option was last selected! Through the form submission, you would need to use a tool to communicate with a database to save the selection.
My suggestion would be using PHP to either write to a file or communicate to an SQL database. I'm not sure what the application for this is, so it is hard for me to suggest the best option.
Using PHP, the form method would need to be changed from "get" to "POST":
<form action="submit.php" method="POST">
The following submit.php script would look similar to this:
<?php
$selection = $_POST['locale'];
//do something to save the selection here
?>
More information on saving data to SQL is available here: http://www.w3schools.com/php/php_mysql_insert.asp
<?php
if($_SERVER['REQUEST_METHOD'] == 'GET'){
if(!empty($_GET['locale'])){
$languange = $_GET['locale'];
}
}
?>
<body>
<header>
<div id="country-select">
<form action="thispage.php" method="get">
<select id="locale" name="locale">
<option <?php if($language == "en_US")? echo "selected" ?> value="en_US" title='1'>English(US)</option>
</select>
<input value="Select" type="submit" />
</form>
</div>
</header>
Basically put the php snippet in each option and when you do the submit it'll keep the value
This question already has answers here:
What is the best way to make jump menu (HTML select dropdown)?
(2 answers)
Closed 7 years ago.
I have problem to insert a jump link into this option value:
<select name="countries" id="countries" style="width:300px;">
<option value='ad' data-image="images/msdropdown/icons/blank.gif" data-imagecss="flag ad" data-title="Andorra">Andorra</option>
Do you want to open a link when clicking on the option? Then this should do the job:
<html>
<body>
<select name="countries" id="countries" style="width:300px;">
<option value='ad' data-image="images/msdropdown/icons/blank.gif" onclick="location='http://www.example.com';" data-imagecss="flag ad" data-title="Andorra">Andorra</option>
</select>
</body>
</html>
Here is another solution to opening a link when clicking the option:
I placed the dropdown bar inside of a form tag. JSFiddle: http://jsfiddle.net/cgmef9y4/
Code:
<form>
<select name="URL" id="countries" style="width:300px;" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value">
<option value="#">Choose your country</option>
<option value="andorra.html">Andorra</option>
</select>
</form>
When you click the dropdown and choose "Andorra", the page will open the link andorra.html (which obviously leads to a 404 -- as there is no andorra.html page on jsfiddle.net).
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have a select menu with four color options, and three images for each option. I want to make the image directory change for all three images when the user selects a different option in the select menu.
<img src="images/black/img1.jpg" />
<img src="images/black/img2.jpg" />
<img src="images/black/img3.jpg" />
<select>
<option value="black">Black</option>
<option value="red">Red</option>
<option value="indigo">Indigo</option>
<option value="teal">Teal</option>
</select>
I'm assuming there is a way to use wildcards in Jquery, but apparently I'm not proficient enough to figure it out.
Try this - note I gave imgs a class and the select an ID
$(function() { // when page has loaded
$("#color").on("change",function() { // assign the event handler
var col=$(this).val(); // value of select
$(".img").each(function() { // I gave the imgs a class to do this
var srcParts = this.src.split("/"); // split the src on /
this.src="images/"+col+"/"+srcParts.pop(); // take the image name
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="img" src="images/black/img1.jpg" />
<img class="img" src="images/black/img2.jpg" />
<img class="img" src="images/black/img3.jpg" />
<select id="color">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="indigo">Indigo</option>
<option value="teal">Teal</option>
</select>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I've three select-box here. How can I make this.
<select class="form-control input-lg">
<option value="1">abcd</option>
<option value="2">efgh</option>
<option value="2">ijkl</option>
<option value="2">mnop</option>
</select>
<select class="form-control input-lg">
<option value="10">desk</option>
<option value="20">pen</option>
<option value="30">pc</option>
</select>
<select class="form-control input-lg">
<option value="100"></option>
<option value="200"></option>
<option value="300"></option>
</select>
Fundamentally this is an event driven question.
You want to populate the secondary select based on the first. You can do this with a jquery change event.
http://api.jquery.com/change/
On change, you initiate a callback function that populates the second select box, from there the population of the third is just the same concept.
A high level explanation is as such:
<select id="select1" class="form-control input-lg">
<option value="1">abcd</option>
<option value="2">efgh</option>
<option value="2">ijkl</option>
<option value="2">mnop</option>
</select>
<select id="select2" class="form-control input-lg">
</select>
<script>
$('#select1').change(function(){
alert("Something has changed");
// RUN SOME OTHER FUNCTION TO POPULATE THE SECOND SELECT BOX
// Grab the dom element of the second select
var select2 = $("#select2");
// iterate your data, here an array with an element, and populate the select element
$.each(['some data'], function() {
select2.append($("<option />").val("Something").text("Something else"));
});
})
</script>
Note: For this you will obviously have to include JQuery library in your code
This is also considerably inefficient, but the improvements would take too long to explain in such an open question.
I'm looking for guidance on the following scenario:
Context: A page displays a dynamically generated list with X (changes based on the user) number of items, each formatted as follows:
<div class="dashboard_section_item">
<div id="openModal_55872761" class="modalEdit">
<div>X
<h3>Properties</h3>
</div>
</div> Edit
<label for="add_listname_label">Assign to list</label>
<br/>
<select name="mod_list" class="mod_list">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<input type="hidden" name="prod_uid" class="prod_uid" value=”55872761">
</div>
1st issue: Need to show a modal div on top of a product div when the user clicks on a specific item Edit link.
Current code: It seems I have to specify a unique ID for each modal so it knows which item it is associated with. What I have done(see above) is add the item uid to the id and href tags when the list is generated so it’s mapped accordingly for each item which works fine.
Is there a better way to to this?
If I'm understanding you, something like this should do:
<div id="openModal_55872761" class="modalEdit">
<div>X
<h3>Properties</h3>
</div>
</div>
<a class="someClass" href="#openModal_55872761">Edit</a>
$(document).on('click', 'a.someClass', function() {
$(this).prev('.modalEdit').modal('show');
});