I am populating the options in dropdown list using mySQL output. These output values are ranked and I want to keep only top 20 values out of 100 in it. Most of the users are interested in only one of these top 20 items. Occasionally a user may want to look something which is low ranked (21st, 22nd ... item).
I remember that I saw this in some website where if the desired option is not present, an option was there "not in the list". Selecting this option creates an input box where a user can write their value.
How this functionality can be acheived? Suggestion of any article pointing to similar problem will be highly appreciated.
Using javascript you can do this fairly easily. Since no HTML was provided, I made a sample:
HTML:
<select id="test">
<option value="0">Sample</option>
<option value="other">Other</option>
</select>
<input type="text" id="test2" style="display:none;"/>
JS:
document.getElementById("test").onchange = function() {
var textbox = document.getElementById("test2");
if (this.value == "other") {
textbox.style.display = "block";
} else {
textbox.style.display = "none";
}
}
Demo: http://jsfiddle.net/DtRhk/
Related
I'm trying to change the data according to the user selection in a list in real time. How would i suppose to achieve this task?
For example:
if the user selects the below information.
How would you like to give us a feedback?
<select>
<option>Comment here</option>
<option>Mail us</option>
<option>Fill the survey</option>
</select>
And if the user selects the first one a comment box should appear below it, if second the mailto link should appear and if the last one then some fields about the survey should be displayed.
Just simple solution
<select id="my_select">
<option value="comment">Comment here</option>
<option value="mail">Mail us</option>
<option value="survey">Fill the survey</option>
</select>
js
$(document).ready(function(){
//initially hide all three boxes
$('#my_select').on('change',function(){
var hasval = $(this).val();
if(hasval == 'comment'){
// show your comment box and hide rest of two
} else if(hasval == 'mail'){
// show your mail and hide rest of two
} else {
// survey form and vice versa
}
});
});
Question: I have two drop-down boxes. Using jQuery, I want to populate second drop-down box on selection of the first drop-down box (help with my existing code). I have marked the area I need help with in the jQuery code below, plus an explanation of what I want to achieve in "Code help".
I realise this is a VERY frequently requested item on SO and I have seen many comments that this can be done in simple JS, but since there are already other jQuery elements in use on the page (not coded by me) and for simplicity, I want to use JQ.
I am completely new to any jQuery code, I have researched many examples, however I am getting lost in the logic since I am not familiar with JS or JQ coding conventions, so keeping things simple is important so I can understand what is happening within the code (I am not just looking for help to get my code working, but also so I can learn and understand what is happening).
I found pretty much exactly the operation I want to achieve (except for one important point explained in "Code help" below) by following a tutorial here: http://jqueryfordesigners.com/populate-select-boxes/. A sample page showing the operation is here: http://jqueryfordesigners.com/demo/select-boxes.html
Code help: In the tutorial, the second dropdown is populated from the content of static html files in: $article.load('select-boxes-' + categoryName + '.html');
I need the second dropdown to be populated from the JS variable $st_list and the PHP variable $student_block based on the selected value in the first dropdown, as shown in my code below.
Could anyone please help with how to adapt the code to make that happen?
Thank you
My code:
For simplicity, the first dropdown is static with simple integer values, but will be populated from the DB in $test_seq in the working code with integer values same as the example code below (if that matters). Additionally, in a separate PHP process (later) the $test_seq, $student_id and other new variables will be used to send back data to the DB (included for reference only, though not relevant for this request).
select-boxes.php
$sql = "SELECT * FROM TBL_NAME";
$result = mysql_query($sql) or die(mysql_error());
while($row = mysql_fetch_array( $result ))
{
$test_seq = $row['SEQ'];
$student_id = $row['st_num'];
$student_name = $row['st_name'];
$student_block .= '<OPTION value="'.$student_id.'">'.$student_id.' - '.$student_name.'</OPTION>';
}
Form:
<form action="select-boxes.php">
<label for="test_day">Test day:</label>
<select name="test_day" id="test_day">
<option selected value=""> </option>
<option value="1">Day 1</option>
<option value="2">Day 2</option>
<option value="3">Day 3</option>
</select>
<input type="submit" id="next" value="next »" />
</form>
jQuery:
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function () {
var $test_day = $('#test_day'),
$st_list = null;
$test_day.change(function () {
var test_dayVal = $test_day.val();
if ($st_list == null) {
$st_list = $('<select name="st_name" id="st_name"><?php echo $student_block; ?></select>').appendTo('form');
$next.remove();
$('form').append('<input type="submit" value="process »" />');
}
$st_list.load('#test_dayVal'); //<--I think this is where I need help.. What do I do here?
});
var $next = $('#next');
$next[0].setAttribute('type', 'button');
});
</script>
I want to create a PHP array of a select list. The list have dynamic options, the options are filled with the help of javascript. I want to get all the options on next page.
So I want to create an array of options. Is there any another way to complete this stuff?
Can anybody help me out? Thank you so much in advance.
<script type = "text/javascript">
var val = "";
function removeOptions(selectbox) {
val = selectbox.value;
for (var i = selectbox.options.length-1; i>=1; i--) {
if (selectbox.options[i].selected) {
addOption(document.form1.list2,val,val);
selectbox.remove(i);
document.form1.list1.focus();
}
}
}
function addOption(selectbox,optiontext,optionvalue ){
var optn = document.createElement("OPTION");
optn.text = optiontext;
optn.value = optionvalue;
selectbox.options.add(optn);
}</script>
//list1
<select name="list1" size="7" multiple="multiple" id="jumpMenu" onchange="removeOptions(this)" style="width:200px">
<option>Choose Area...</option>
<?php foreach($dbh->query($sql) as $row){
$a=$row['name'];?>
<option value="<?php echo $a?>"><?php echo $a?></option>
<?php }?>
</select>
//list2
<select name="list2" size="7" multiple="MULTIPLE" id="list2" style="width:170px">
</select>
First: if You want to use multiple with select box, then this selectbox's name have to contain sharp brackets: name="list1[]" and name="list2[]" - this way a PHP will know that this is an array of values.
Second: learn jQuery - though it may seem hard in the beginning it will save You a lot of time and browser-compatibility problems in the future. And jQuery will save Your a*s many times in the future.
For Your purpose I would recommend not just using onchange events but implement additional 4 buttons between the two multiselectboxes that will move the selected options from one to another or all from one to another. This kind of multiselect looks like the one pictured below.
By the first button >> all the options from 1. select are moved to the second one and vice versa with the 4th button <<.
By the second button > only the selected option(s) is(are) moved the second select and vice versa with the third button <.
By this You only catch the click event on the buttons... That is really easy using jQuery...
I need to create 3 dependent drop downs related to each other. So if the first one is selected, related data will be shown in the 2nd drop down, and when an option is selected in the second drop down, in the 3rd drop down some related data will be shown.
And i need to use $_GET on this form, so if a specific option in the second one is slected a massage shows up, and when an option is the 3rd drop down is seleted, the page redirects for example to www.google.com. And i need two none related data in the first filed, so when they are selected, the page redirects for exaple to www.msn.com.
I know it needs JavaScript, but unfortunately I do not know JS for now.
And please do not use " this.value" for sending parameters to JavaScript, because it conflicts with one of my other codes.
( And I don't want the page to reload )
something like this :
Drop down 1 ----------------------- drop down 2 ----------------------- drop down 3
option 1 ( redirect to msn.com)
option 2 ==========================> Option 100 ======================> Option 500
Option 101 Option 501
Option 3 (redirect to google.com) Option 102 (message:Hello )
Option 103 ======================> Option 700
Option 701
I tried hard to explain it, I hope you get what I was trying to say.
Thanks for your help.
Here is a quick and dirty answer...
<html>
<head>
<script type='text/javascript'>
var drop3Options = {"100":["500","501"],"103":["700","701"]};
function drop1Change(){
var value = document.getElementById("drop1").value;
if(value == "msn")
window.location.href = "http://www.msn.com";
else if(value == "google"){
window.location.href = "http://www.google.com";
}
}
function drop2Change(){
var value = document.getElementById("drop2").value;
var drop3List = document.getElementById("drop3");
if(drop3Options[value]){
drop3List.options.length = 0;
for(var i = 0; i < drop3Options[value].length; i++){
drop3List.options[i] = new Option(drop3Options[value][i],drop3Options[value][i]);
}
}
}
</script>
</head>
<body>
<form method='GET' action='serverScript.php'>
<select id='drop1' onchange='drop1Change()'>
<option value='msn'>MSN</option>
<option value='dr2'>DROP 2</option>
<option value='google'>GOOGLE</option>
</select>
<select id='drop2' onchange='drop2Change()'>
<option value='100'>100</option>
<option value='101'>101</option>
<option value='102'>102</option>
<option value='103'>103</option>
</select>
<select id='drop3'>
<option value='500'>500</option>
<option value='501'>501</option>
</select>
<input type='submit' value='SUBMIT'/>
</form>
</body>
</html>
Obviously I don't know what exactly you are using this script to do, so it is hard for me to make assumptions and give you better code, but this will do what I understood the question to be.. I also don't know what server side scripts you will be sending this to. But just change the ACTION attribute in the form to reflect the location of the server script..
The javascript has one global variable (drop3Options). This is an object with two properties which hold 2 arrays for the select 3 options..
So drop3Options['100'] holds an array ['500','501']
and drop3Options['103'] holds an array ['700','701']
when you change a selection box, it calls the appropriate method, this is done by adding the "onchange" attribute to each select element, and it calls the function which looks at the value and does things accordingly
I assume you will need to do more than this, so comment with more specifics and I will gladly help
I have a list of countries and their area codes in a database. I am trying to auto update a text field with the countries area code when a select option is selected.
ex.
<select name="country">
<option value="CA" code="+1">Canada</option>
...
</select>
<input type="text" name="phone" />
I need to pass on to the script the value CA and the users need to see Canada. Basically what I'm asking is can I create a new option code and have jQuery update the text field that I choose to it.
Is this possible to do? or is there another way I can accomplish this?
Edit: "code" is supposed to be the country's area code. So when a user selects Canada for example the text field phone gets updated with +1. I know I can just set value to +1 and then use .change() to update phone's .val() but I need the current value to pass on to the script that processes it.
I suggest you use an HTML5 data- attribute instead of a custom attribute:
<select name="country">
<option value="CA" data-code="+1">Canada</option>
...
</select>
<input type="text" name="phone" />
and then bind a handler to the change event:
$('select[name="country"]').change(function() {
$('input[name="phone"]').val($(this).children('option:selected').data('code'));
});
or with less jQuery:
$('select[name="country"]').change(function() {
$('input[name="phone"]').val(this.options[this.selectedIndex].getAttribute('data-code'));
});
Another option would be to have a country -> code map in JavaScript
var map = {
'CA': '+1',
...
};
and then look up the code.
Be sure to assign each element an id.
var code = $('#country option:selected').attr('code');
$('#phone').val(code);
If "code" doesn't work. Use "title".
Not entirely sure what you're asking, but dos this help?
$('select[name=country]').change(function() {
$('input[name=phone]').val($(this).find('option:selected').attr('code'));
alert('Do something else with this: ' + $(this).val());
});
$("select[name='country']").change(function() {
$("input[name='phone']").val($(this).find('option:selected'));
});
You can try this. It ties into the select menus change event and then gets the "code" attribute value and sets the text of the input to it.