I have web page with dynamically created Selects (dropdown), the web page created by shell CGI script:
while read line; do
textBoxValue=`printf "$line" | cut -d' ' -f1`
comboBoxValue=`printf "$line" | cut -d' ' -f2`
echo "
<div id="divId$start_id">
<input type="text" name="newTexdtBox$start_id" id="newTextBox" value='$textBoxValue' />
<select name="newComboBox$start_id" id="newComboBox" value="$comboBoxValue">
<option disabled>pls select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="9">all</option>
</select>
<a href='javascript:void(0)' onclick='return removeThisElement($start_id)'>Remove This</a>
</div>
<a href='javascript:void(0)' onclick='return getSelects()'>getSelects</a>
"
start_id=$((start_id+1))
count=$((count + 1))
done < my_conf
Each Select object has his own attribute value=$comboBoxValue. I would like to set this value attribute as selected when page loaded. Suggested solution is (http://snipplr.com/view/67752/set-default-value-for-select-dropdown-lists-using-value-attribute/) but it seems dont work because this.getAttribute("value") doesnot return anything.
How I can set Default Value for Select (dropdown list) by using value attribute?
try
<select name="newComboBox$start_id" id="newComboBox" value="$comboBoxValue">
<option value="" selected='selected'>pls select</option>
<option value="1">1</option>
If you want to solve it using jQuery
$(function(){
$('select[value]').each(function(){
$('option[value="' + $(this).attr('value') + '"]', this).prop('selected', true);
});
});
Demo: Fiddle
But the optimal solution will be to solve it using html markup itself. (I don't know cgi scripts), but something like
<select name="newComboBox$start_id" id="newComboBox">
<option disabled>pls select</option>
<option #if ($comboBoxValue == 1) { selected="selected"} value="1">1</option>
<option #if ($comboBoxValue == 2) { selected="selected"} value="2">2</option>
<option #if ($comboBoxValue == 3) { selected="selected"} value="3">3</option>
....
</select>
The solution http://snipplr.com/view/67752/set-default-value-for-select-dropdown-lists-using-value-attribute/ is working properly, I just forgot \ symbol when render function from Shell script (getAttribute(\"value\")).
This works fine (when rendering from CGI Shell script):
\$(document).ready(function() {
\$('select[value]').each(function(){
\$(this).val(this.getAttribute(\"value\"));
});
});
Related
I have a problem like the following. I embed a chart in my site with inframre tags with . My website has a option tag. How can I change url 1 in an iframe to url2 when choosing option 2, url3 when choosing option 3. A solution would be very grateful.
Example :
<iframe src="url1"></iframe>
<select id "select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
I found a very simple solution. This is my solution.
<iframe src="url1" id="urlFrame"></iframe>
<select id="tuyencap" onchange="changeValue(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<script type="text/javascript">
function changeValue(){
var tuyencap = document.getElementById("tuyencap").value;
alert(tuyencap)
if (tuyencap ==1){
document.getElementById('urlFrame').src="url1";
}
else if (tuyencap ==2){
document.getElementById('urlFrame').src="url2";
}
else if (tuyencap ==3){
document.getElementById('urlFrame').src="url3";
}
else if (tuyencap ==4){
document.getElementById('urlFrame').src="url4";
}
}
</script>
use onchange for your select element
<iframe src="url1" id="urlFrame"></iframe>
<select id = "select" onchange="changeValue(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Javascript:
function changeValue(element){
var value = element.value;
document.getElementById('urlFrame').src = value;
}
Note
The value of your options should be the URL you intend to use so instead of:
<option value="1">1</option>
I expect you should have something like:
<option value="http://google.com">1</option>
EDIT 1
You can use the innerHTML also but I don't think it's good user experience
<option value="1">http://google.com</option>
__
var value = element.innerHTML;
document.getElementById('urlFrame').src = value;
EDIT 2
Like #LelioFaieta suggested you can use the data.* attribute:
<option data-url="http://google.com" value="1">1</option>
Javascript:
function changeValue(element){
var urlSelect = element.dataset.url;
document.getElementById('urlFrame').src = urlSelect;
}
You can do with data attribute if you need.
<iframe src="url1" id="urlFrame"></iframe>
<select id="select" onchange="changeValue(this)">
<option value="1" data-url="url1">1</option>
<option value="2" data-url="url2">2</option>
<option value="3" data-url="url3">3</option>
<option value="4" data-url="url4">4</option>
</select>
function changeValue(){
var x = document.getElementById("select");
var myoption = x.options[x.selectedIndex];
var urlSelect = myoption.dataset.addr;
alert('urlSelect = '+urlSelect);
document.getElementById('urlFrame').src = urlSelect;
}
The dataset attribute is the attribute that read all the data attributes from your option tag.
Hi please check the code below,it's working absolutely fine. You just need to change path as per your requrement
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<iframe height="800px" width="800px"
src="http://cdns2.freepik.com/free-photo/facebook-logo_318-49940.jpg"
id="imageToSwap" class="profile"></iframe>
<select onchange="$('#imageToSwap').attr('src',
this.options[this.selectedIndex].value);">
<option value="http://cdns2.freepik.com/free-photo/facebook-
logo_318-49940.jpg" selected>Facebook</option>
<option value="http://cdns2.freepik.com/free-photo/twitter-logo_318-
40459.jpg">Twitter</option>
</select>
I have two select option buttons on single web page but on different tabs. I want to change the other one button value on change of any one button and assign it to some element like span in example code. All things are working perfectly but it just taking time to close dropdown when i am changing value. in firefox there is no problem
jsfiddle
My HTML Code
<select class="select one" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br><br><br>
<select class="select two">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br><br><br>
<span class="value"></span>
JQuery
var lang = $('select.one').val();
$('span.value').text(lang);
$('select.select').change(function(){
lang = $(this).val();
$('span.value').text(lang);
if ($(this).hasClass('one')) {
$('.two').val($(this).val()).trigger('change');
}
else{
$('.one').val($(this).val()).trigger('change');
}
});
Thanks in advance
fixed jsFiddle demo
It's cause you're concurrently triggering changes. Cool that down, this is all you need:
var lang = $('select.one').val();
$('span.value').text(lang);
$('select.select').change(function () {
lang = this.value;
$('span.value').text(lang);
$('.select').val(lang);
});
You can try this instead:
var lang = $('.select.one').val();
$('.value').text(lang);
$('.select').change(function (e) {
$('.select').val(this.value);
$('.value').text(this.value);
});
The issue was .trigger() method, that was traversing up to the dom for lookup and setting the values to each elem again and again.
Check the updated fiddle.
I have a page that has several forms created using a while loop and each form has four selects. I am trying to work out how I can check each of the selects belonging to the current form (the one containing the button clicked) to confirm if any been selected. All of the forms are wrapped in a single div called #audit_content.
The intention is to check that if the variable grade isn't a certain value then the script checks if any of the selects have been selected.
(The value $i is created during the while loop, used to uniquely identify each form)
the html
<form id="audit_form<? echo $i; ?>">
<select name="grade" class="grade<? echo $i; ?>">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<select>
<select name="patient" class="reason_select">
<option value="">Select</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="exposure" class="reason_select">
<option value="">Select</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="equipment" class="reason_select">
<option value="">Select</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="positioning" class="reason_select">
<option value="">Select</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="button" name="audit_submit" class="audit_submit audit_submit_btn ie7_submit" value="" />
<input type="hidden" class="form_id" value="<? echo $i; ?>" >
</form>
The JQuery
<script>
$(document).ready(function(){
$('#audit_content').on("click", ".audit_submit", function(){
var form_id = $(this).prev('.form_id').val();
var grade = $('.grade'+form_id).val();
if(grade != 1){
$('select.reason_select').each(function(){
alert($(this).text())
}
});
</script>
The script as it is displays the values of every select with the class reason_select on the page which I realise is because I haven't told it to check a specific form, thats the bit I'm stuck at.
button shown is outside the form, not inside as mentioned.
To isolate any repeating type widget look for the parent of that widget, then search only within it:
Moving the button inside the form would make it very easy by doing:
$('#audit_content').on("click", ".audit_submit", function () {
var form=$(this).closest('form')
var selects=form.find('select');
// do somthing with selects
})
I would change the script to
<script>
$(document).ready(function () {
$('#audit_content').on("click", ".audit_submit", function () {
var form = $(this).prev('form');
var grade = $('select[name="grade"]', form).val();
if (grade != '1') {
$('select.reason_select', form ).each(function () {
alert($(this).text());
});
}
});
});
</script>
In the script you have posted there are several missing ) and } so it should create syntax errors..
You mention
current form (the one containing the button clicked)
but your button is not contained in the form, that is why i changed the code to form = $(this).prev('form')
I have three identical drop downs. I want to select a value from drop1 and have that value excluded from drop2. Then the selections in drop3 should exclude 1 & 2. Any ideas?
<select name="drop1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="drop2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="drop3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
You can use change event and remove selected elements from the dom
$('select[name=drop1]').change(function() {
var drop2 = $('select[name=drop2]').empty().hide();
var exclude = $(this).val();
var size = $(this).children().length;
for (var i=0; i<size; ++i) {
if (i != exclude) {
drop2.append('<option value="' + i + '">' + i + '</option>';
}
}
});
if you have more complex example and you need value based explude you can create a clone.
var clone = $('select[name=drop2]').clone();
$('select[name=drop1]').change(function() {
var copy = clone.clone();
copy.find('option[value=' + $(this).val() + ']').remove().end();
$('select[name=drop2]').replaceWith(copy);
});
Depending on how comfortable you are with PHP, or AJAX you have two solutions.
If you are more comfortable with PHP you could have a user submit the data from one select form and then using if statements like
if $value != '1'{
echo '<option value="1">1</option>';
}
and do that for each field in the second form; then replicate that for the third form.
The smoother looking solution would be using AJAX to use a listener to see when a user clicks a field a java value is set as that field and using a similar "if then show" method on the java-script variable to hide the fields that contain that value in the other forms.
Also one of the easiest solutions would be allowing multiple-selections (Assuming you are ok with the look of using one form & the values between the forms are the same like the example you gave above)... That example being:
<select id="my_num" name="my_num" size="5" multiple="multiple" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
I have an external Javascript file and i am trying to alert the value of select tag.
My <select> code looks like this:
<select id="vote">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" value="vote" onclick="castvote();">
and the Javascript (which is external):
function castvote()
{
alert(document.vote.options[document.vote.selectedIndex].value);
}
But I get the error "document.vote is undefined".
Can someone help me with this.
Best
Zeeshan
If selecting by Id, you should use :
function castvote() {
var sel = document.getElementById("vote");
alert(sel.options[sel.selectedIndex].value);
}
Easy way, change your code so that your form field has a name attribute:
<select name="vote" id="vote">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" value="vote" onclick="castvote();">
Better way, change your javascript so it is retreiving the select box by its ID rather than through the document object:
function castvote() {
var mySelect = document.getElementById("vote");
alert(mySelect.options[mySelect.selectedIndex].value);
}