Combobox; Show Different Description Text Upon Selection? - javascript

This is a sample code.
If we have 100 options e.g. and User selects an Option it shows the respective Description.
I made it work with Jscript but thats too long code to mess around. and is simple thing
Here is JS Version : http://jsfiddle.net/eHwVn/
and I want to Use Simple HTML
<select>
  <option value="i">ItemA</option>
  <option value="i">ItemB</option>
  <option value="i">ItemC</option>
  <option value="i">ItemD</option>
  <option value="i">ItemE</option>
  <option value="i">ItemF</option>
</select>
How to add description to each item using HTMl?
TO Get this:
(Sorry I cant post Images Yet)
http://i.stack.imgur.com/DSm4j.png
Thanks for Help
Peace!

Try the following JSFiddle : http://jsfiddle.net/3XTjH/
using the HTML :
<select id="example" onchange="showtext()">
<option value="http://www.cnet.com" data_info="Click here for Cnet, the primer technology site on the net!">Cnet</option>
<option value="http://www.cnn.com" data_info="Click here for CNN, one of the best sources online to get your news.">CNN</option>
<option value="http://www.geocities.com" data_info="Click here for Geocities, and receive 10 megs of free web space.">Geocities</option>
</select>
<br>
<textarea rows=5 cols=21 wrap="virtual" id="text"></textarea>
and the Javascript :
function showtext() {
var dropdown = document.getElementById("example");
var curOption = dropdown.options[dropdown.selectedIndex];
var info = curOption.getAttribute('data_info');
var txt = document.getElementById('text');
txt.value = info;
}
Every time you select a new option it find the currently selected option, and then find the value of the data_info attribute of that option and set the value of the text area to it.

Related

How to reinitialize a function in jQuery after having modified the DOM

Using a jQuery Plugin (Link to Plugin Code) I try to achieve a multi-select drop-down menu. Then I want to dynamically (depending on user input) change the menu-entries. The first part works fine, but changing menu-entries doesn't so far. Therefor I wanted to ask for help.
Here is the HTML part:
<select id="Fruits" name="Fruits" multiple="" style="display: none;">
<option value="1">Number1</option>
<option value="2">Number2</option>
<option value="3">Number3</option>
</select>
Then I use that code to initialise the menu:
$(function(){
$('#Fruits').multiSelect({'noneText':'Select Fruits'});
});
The result is precisely what I want:
Next I try to dynamically add a menu-entry. I do that by the following code:
var option = document.createElement("option");
option.text = "Number4";
option.value = "4";
var select = document.getElementById("Fruits");
select.appendChild(option);
This is what I hope to achieve:
However the result looks precisely like the first picture. Also running
$(function(){
$('#Fruits').multiSelect({'noneText':'Select Fruits'});
});
again doesn't help.
Get the MultiSelect instance (.data("plugin_multiSelect")) from the <select> and call .updateMenuItems() after you've added the new elements:
$("select").data("plugin_multiSelect")
.updateMenuItems();
--
The answer is based on the source code and a test on their demo page.

On select of dropdown option give specific answer in the div tag

I'm trying to develop a helpdesk & initially trying to input pre defined selected question with their solution. I'm stuck where i need to display different solution to different question depending on the question selected from the drop down list.
Please Help
<html>
<head>
<title>HelpDesk</title>
</head>
<body>
<h1 align="center">Helpdesk</h1>
<hr>
<form align="center">
Select Question Type :
<select>
<option>Select Query Type</option>
<option id="1">Internet not working</option>
<option id="2">Cannot download file</option>
</select>
</form>
</body>
</html>
You can use the onChange event to listen to value changes and react accordingly.
function showAnswer(id) {
document.getElementById('answer').innerHTML = answers[id];
}
var answers = {
js: 'JavaScript is a scripting language for computers. It is often run in web browser applications to create dynamic content like a popup message or a live clock. It is not related to and is different from the programming language Java.',
html: 'HyperText Markup Language (HTML) is a Programming language for creating webpages. Webpages are usually viewed in a web browser. They can include writing, links, pictures, and even sound and video. HTML is used to mark and describe each of these kinds of content so the web browser can show them correctly.',
css: 'Cascading Style Sheets, or CSS, are a way to change the look of HTML and XHTML web pages. CSS was designed by the W3C, and is supported well by most modern web browsers. The current version of CSS is CSS 2. CSS version 3 is currently being worked on. It will introduce new properties like border-radius.'
};
Select Query Type:
<select onChange="showAnswer(this.value)">
<option value="js">JavaScript</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
</select>
<hr />
<div id="answer">JavaScript is a scripting language for computers. It is often run in web browser applications to create dynamic content like a popup message or a live clock. It is not related to and is different from the programming language Java.</div>
What do we want to achieve?
Depending on a select option (type of question) we want to show a different solution/answer. The questions are meant to be stored in HTML and not being outsourced (according to the initial post).
Solution
The solution would be to store each solution in a different outsourced HTML file. So one can edit and maintain the solutions in known HTML structure and also maintain each solution seperately. Furthermore we do not keep all the solutions in our DOM anymore, which saves traffic and bits.
Requirements
For each solution we create one HTML file to it.
index.html
<html>
<head>
<title>HelpDesk</title>
<script>
//This is out simple AJAX routine to not overload it by any framework.
//If you are already using jQuery, just use $.get()
;var AJAX = {
getXmlDoc: function(){return ((window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"))},
//u:=url, f:=callback, c:=any param to pass to callback
Get: function(u, f, c){
var tDoc = this.getXmlDoc();
tDoc.open('GET', u, true);
tDoc.onreadystatechange = function(){
if (tDoc.readyState === XMLHttpRequest.DONE && tDoc.status === 200) f(tDoc, c);
else f(null, c)
};
tDoc.send();
}
};
//This namespace holds our functionality
;var Answers = {
mDefaultType: '_Default', //The type of our default/fallback answer
//Our select on change event
//e:=dom element (=select)
_onChange: function(e){
var tF = e.value + '.html'; //The filename to fetch
//Now we are loading the correct content from the outsourced html file
AJAX.Get(tF, function(r, f){
if (r){
//Fetching our solution div
var tD = document.querySelector('#Solution');
if (tD) tD.innerHTML = r.responseText
}
else console.log('_onChange(): File not found "' + f + '"')
}, tF);
},
//We assign the change event to the select
Init: function(){
var tS = document.querySelector('#selType');
if (tS) tS.onchange = function(){Answers._onChange(this)}
}
};
</script>
</head>
<body onload = 'Answers.Init()'>
<h1 align="center">Helpdesk</h1>
<hr>
<form align="center">
Select Question Type :
<!-- Here we need an id to assign the javascript event -->
<select id = 'selType'>
<option>Select Query Type</option>
<!-- We do not require id on options, yet values -->
<option value = 'Solution1'>Internet not working</option>
<option value = 'Solution2'>Cannot download file</option>
</select>
<!-- Here we are storing our anwers -->
<div id = 'Solution'><!-- Filled by AJAX --></div>
</form>
</body>
</html>
Solution1.html
<h1>Solution 1</h1>
<p>Hello there, I am solution #1</p>
Solution2.html
<h1>Solution 2</h1>
<p>Hello there, I am solution #2</p>
Assuming that all your question and solution on the HTML itself, you can try the solution given below.
HTML
<h1 align="center">Helpdesk</h1>
<hr>
<form align="center">
Select Question Type :
<select>
<option>Select Query Type</option>
<option value="1">Internet not working</option>
<option value="2">Cannot download file</option>
</select>
<div class="results">
<div class="ans" data-ans="1">Internet solution</div>
<div class="ans" data-ans="2">download solution</div>
</div>
</form>
JS
(function(){
var ele = document.querySelectorAll('form select');
var result = document.querySelectorAll('.results .ans');
ele[0].addEventListener('change',function(e){
var matchVal = this.value.toString();
Array.prototype.forEach.call(result,function(val){
val.style.display = 'none';
if(val.getAttribute('data-ans') == matchVal){
val.style.display = 'block';
}
})
});
})()
Here is a working copy in jsFiddle http://jsfiddle.net/vpwj3a42/
Hope this helps !

Tag Search using Button in Tumblr

I would like to have a tag search button in Tumblr by selection using the select option but I am not sure how to insert the onclick event using Tumblr's {text:Search Label}.
form action = "">
<select name = "Cities">
<option value="----">--Select--</option>
<option value="roma">Roma</option>
<option value="torino">Torino</option>
<option value="milan">Milan</option>
</select>
Anyone here can help? Thanks.
Well here is my code: http://jsfiddle.net/htWW6/
This is the script:
$(document).ready(function(){
$('select').bind('change',function(){
var loc = $(this).val();
location = "/tagged/" + loc;
});
});
This is jquery, so if your theme currently has this installed (many do) then that code should work off the shelf. If not then it is very easy to add jquery, but if you need a pure JS solution, I cannot help with that. Although the other answer does offer some insight.

How to load a text file using JavaScript with a HTML combobox (<select>)?

First of all, thanks for reading the topic.
Now, I'm making a website using HTML5 and I need to load a text file according to the user choice in a combobox. I mean, the user selects an option from the combobox and the text from it should shown on a specific cell of a table. The number of times that the user wants without refreshing the site.
The problem is that the code is not working. The code:
The HTML for the combo box:
<select id = "comboSelect">
<option value="text1.txt">text1</option>
<option value="text2.txt">text2</option>
<option value="text3.txt">text3</option>
<option value="text4.txt">text4</option>
<option value="text5.txt">text5</option>
</select>
The HTML for the table cell:
<td colspan="5" class="text" id = "cuadroTexto"></td>
The JavaScript that does the rest of the work:
$(document).ready(function(){
document.getElementById("comboSelect").addEventListener('change',function () {
$(document.getElementById("cuadroTexto")).load(value);
alert("Cargado");
},false);
});
Edit 1:
I think that the JavaScript is not recognizing the change event from the combobox.
I'm yet not working with a server.
Check this is working
CODE
$(document).ready(function(){
$("#comboSelect").change(function () {
$("#cuadroTexto").load(this.value);
alert($(this).val())
});
});
Fiddle http://jsfiddle.net/krunalp1993/Qr6GK/

When an option tag is selected, how do you navigate to another page and then run a jQuery function automatically?

I am creating a way-finding app using HTML5, jQuery and Javascript. There are 3 total html pages and each page has a different legend. In this app I have buttons that call a jQuery click function to display stars on the map above the location you have selected. Each button has an id and the buttons work how I want them to work. The problem is that I want to add a drop down list that will provide the same functionality as the buttons on the legend. So basically what I want to be able to do is select a section from the drop down list and then jump to the page that has that section and have the stars already displayed for the selected section. IE: If I select Restrooms, I want to be able to jump the ground floor and have stars displayed over the restrooms. Is this possible to do? I tried using a Javascript function to make the URL navigate to the value of the select list option I wanted but that didn't make the stars show up. I am fairly new to Javascript and jQuery so please help. Thanks! Here is my code:
HTML:
<form method="get" name="form1" action="">
<select name="locations" onchange="gotoSection(this.form)">
<option selected>Please pick a Section</option>
<option disabled>---Ground Floor---</option>
<option value="grdFloor.html#mc" >Mayor's Commision on Literacy</option>
<option value="grdFloor.html#ch">Children's</option>
<option value="grdFloor.html#sr">Story Book Room</option>
<option value="grdFloor.html#eo">Extensions Office</option>
<option value="grdFloor.html#ma">Montgomery Auditorium</option>
<option value="grdFloor.html#restRm">Restrooms</option>
</select>
</form>
<div id="restRm" class="legend">
<a href="#restRm" ><img src="floorMaps/restBTN.png"/></a>
</div>
jQuery:
$(document).ready(function(){
$('.legend, .arrows').show('slow');
$('.stars').hide();
$('#restRm').click(function(){
$('.stars:not(#restStar1, #restStar2)').fadeOut('slow');
$('#restStar1, #restStar2').toggle('pulsate');
}); //end restroom
Javascript:
function gotoSection(form) {
var newIndex = form.locations.selectedIndex;
if ( newIndex == 0 ) {
alert( "Please select a Section!" );
} else {
cururl = form.locations.options[ newIndex ].value;
window.location.assign( 'http://libwww3.freelibrary.org/maps/central/' + cururl );
}
}
Try this:
<select name="locations" onchange="gotoSection(this.value)">
function gotoSection(cururl) {
window.location.assign( 'http://libwww3.freelibrary.org/maps/central/' + cururl );
}
EDIT:
Maybe i should read the entire question before i answer, i thought the problem was that your navigation didn't work, i apologize.
But as to the question about the stars, if i understand your question and example code correctly, you're navigating within the same page, just with diferent #hash tags. And if thats the case, your document.ready won't run.
Instead you can make a function that triggers the stars and call that from your gotoSection method, after you've assigned the new url.

Categories

Resources