I have a table that contains 2 columns. The first one has a dropdown that needs to be selected in order to display its value in the second column. The problem is that only the first row of the table is being updated. When selecting the second dropdown, the first row is being updated. I am not a javascript developer and I am searching how to address this problem.
Here is part of the code:
function updateinput(e) {
var selectedOption = e.options[e.selectedIndex];
document.getElementById('viewvalue').value = selectedOption.getAttribute('data-name');
}
<tr>
<td>
<select onchange="updateinput(this)">
<option data-name="">Select</option>
<option data-name="value 1">test 1</option>
<option data-name="value 2">test 2</option>
</select>
<td><input type="text" id="viewvalue" name="viewvalue"></td>
<br>
<td>
<select onchange="updateinput(this)">
<option data-name="">Select</option>
<option data-name="value 1">test 1</option>
<option data-name="value 2">test 2</option>
</select>
<td><input type="text" id="viewvalue" name="viewvalue"></td>
</tr>
You have to keep reference to the select field. Since you already used the data-attribute, I did the same in the example.
The attached data-select-index allows you to reference the id of the corresponding input-field. E.g. select-tag data-select-index="num1" references input-tag id="view-num1" and so on
function updateinput(e) {
var selectedOption = e.options[e.selectedIndex];
document.getElementById('view-' + e.getAttribute('data-select-index')).value = selectedOption.getAttribute('data-name');
}
<tr>
<td>
<select data-select-index="num1" onchange="updateinput(this)">
<option data-name="">Select</option>
<option data-name="value 1">test 1</option>
<option data-name="value 2">test 2</option>
</select>
<td><input type="text" id="view-num1" name="viewvalue"></td>
<br>
<td>
<select data-select-index="num2" onchange="updateinput(this)">
<option data-name="">Select</option>
<option data-name="value 1">test 1</option>
<option data-name="value 2">test 2</option>
</select>
<td><input type="text" id="view-num2" name="viewvalue"></td>
</tr>
Related
I have a scenario where i want to deselect all the selected select boxes inside the variable in jquery. Below is my html and jquery code.
I just wanted that when i clicked on a button and get all the html in a variable and then want to deselect all the selected select box and bind it into the variable again in jquery. Below is my code. Please help me anyone.
Thanks in advance.
var html = "<tr>" + '<input type = "hidden" name = "translator_approved_for_id[]" value="-1">' + $("#add_more_service").html() + '</tr>';
$(html).find("option:selected").removeAttr('selected', '');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<tr><input type="hidden" name="translator_approved_for_id[]" value="-1">
<td>
<select id="translator_service1" name="translator_service[]" class="form-control">
<option value="select">--select--</option>
<option value="Annotation">Annotation</option>
<option value="Assessment" selected="selected">Assessment</option>
<option value="Coding">Coding</option>
<option value="Corporate Training">Corporate Training</option>
</select>
</td>
<td>
<select id="translator_source_language1" name="translator_source_language[]" class="form-control">
<option value="select">--select--</option>
<option value="Abkhazian">Abkhazian</option>
<option value="Achinese">Achinese</option>
<option value="Acoli" selected="selected">Acoli</option>
<option value="Adangme">Adangme</option>
<option value="Afar">Afar</option>
</select>
</td>
<td>
<select id="translator_target_language1" name="translator_target_language[]" class="form-control">
<option value="select">--select--</option>
<option value="Abkhazian">Abkhazian</option>
<option value="Achinese">Achinese</option>
<option value="Acoli">Acoli</option>
<option value="Adangme">Adangme</option>
<option value="Afar" selected="selected">Afar</option>
<option value="Afrikaans">Afrikaans</option>
<option value="Akan">Akan</option>
</select>
</td>
<td>
<select id="translator_industry" name="translator_industry[]" class="form-control">
<option value="">select</option>
<option value="Agriculture">Agriculture</option>
<option value="Automobiles">Automobiles</option>
<option value="Aviation" selected="selected">Aviation</option>
<option value="Banking">Banking</option>
</select>
</td>
<td>
<input type="button" value="Add" onclick="show_approved_clients('14','ODk3NQ==')">
</td>
<td><input type="button" value="Remove" onclick="$(this).parent().parent().remove();"></td>
</tr>
You need to update the html variable after removing attribute, for this .end() to end the most recent filtering operation and return the set of matched elements i.e. $(html) then use .prop() to get outerHTML property.
html = $(html)
.find("option:selected")
.removeAttr('selected') //Removes selected attribute
.end() //End the most recent filtering operation i.e. target back
.prop('outerHTML'); //Get outerHTML of element
<div id="booking-details">
<label for="select-1">Select your Programme:</label> <br />
<div class="styled-select">
<select id="select-1">
<option value="test_1">Test 1</option>
<option value="test_2">Test 2</option>
<option value="test_3">Test 3</option>
<option value="test_4">Test 4</option>
<option value="test_5">Test 5</option>
</select>
</div>
<br />
<label for="select-2">Select your time slot:</label> <br />
<div class="styled-select">
<select id="select-2">
<option value="one">01:00</option>
<option value="two">02:00</option>
<option value="three">03:00</option>
<option value="four">04:00</option>
<option value="five">05:00</option>
<option value="six">06:00</option>
<option value="seven">07:00</option>
<option value="eight">08:00</option>
<option value="nine">09:00</option>
<option value="ten">10:00</option>
<option value="eleven">11:00</option>
<option value="twevle">12:00</option>
<option value="one-pm">13:00</option>
<option value="two-pm">14:00</option>
<option value="three-pm">15:00</option>
<option value="four-pm">16:00</option>
<option value="five-pm">17:00</option>
<option value="six-pm">18:00</option>
<option value="seven-pm">19:00</option>
<option value="eight-pm">20:00</option>
<option value="nine-pm">21:00</option>
<option value="ten-pm">22:00</option>
<option value="eleven-pm">23:00</option>
<option value="midnight">00:00</option>
</select>
</div>
</div>
I'm trying to complete a tv guide table and finding it difficult to put specific select results into specific parts of a table, is there any methods I could use to do this?
The table has 10 rows, each a different tv channel and then 24 columns to the left in reference to each hour of the day.
Reading your question, I'd consider putting two classes on each table cell (td). One class would be the channel, and other would be the time.
Then in jQuery, for each data item, you'd find the cell that matches both classes and append to that cell (td).
For example, if you had a table:
<table>
<tr>
<td class="test_4 ten-pm"></td>
<td class="test_4 eleven-pm"></td>
<td class="test_4 midnight"></td>
</tr>
<tr>
<td class="test_5 ten-pm"></td>
<td class="test_5 eleven-pm"></td>
<td class="test_5 midnight"></td>
</tr>
<table>
Then you could add to it such as:
$('td.test_5.midnight').append( "x" );
See Also:
How can I select an element with multiple classes in jQuery?
This question already has answers here:
How to toggle selection of an option in a multi-select with jQuery?
(8 answers)
Closed 6 years ago.
I have multiple select boxes used for filtering data from a database.
For example select box 1:
<select name="team" multiple size="3">
<option value="1">Team 1</option>
<option value="2">Team 2</option>
<option value="3">Team 3</option>
</select>
And select box 2:
<select name="name" multiple size="3">
<option value="John">John</option>
<option value="Mary">Mary</option>
<option value="Ryan">Ryan</option>
</select>
Problem is once i select a value from a field i can't deselect it and i don't want to reset all filters and start allover. I would like to be able to deselect the selected option on second click, for each box ... i.e.: 1st click => select / 2nd click=> deselect.
How is the easiest way to do this?
Thank you for patience!
Try something like this
<select id="select1" name="team" multiple size="3">
<option value="1">Team 1</option>
<option value="2">Team 2</option>
<option value="3">Team 3</option>
</select>
<select id="select2" name="name" multiple size="3">
<option value="John">John</option>
<option value="Mary">Mary</option>
<option value="Ryan">Ryan</option>
</select>
Jquery
$("#select1").change(function(){
$("#select2").val(null);
});
$("#select2").change(function(){
$("#select1").val(null);
});
Try this
$( "select" ).dblclick(function(){
$( this ).val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<select name="team" multiple size="3">
<option value="1">Team 1</option>
<option value="2">Team 2</option>
<option value="3">Team 3</option>
</select>
<select name="name" multiple size="3">
<option value="John">John</option>
<option value="Mary">Mary</option>
<option value="Ryan">Ryan</option>
</select>
I am still learning js, and am stuck once again, I am trying to add 2 drop down menu values and total them in one innerHTML.
I am trying to take the value2 from Phones/Devices (item) then add the value from the New Activation (item1) drop down and total them in the Commission innerHTML. In the js, the commission line is cost.
I have tried adding the element in the cost line, and that did not work. also tried adding the item itself to the cost line.
here is the html and js
<table width="50%" border="0">
<tr>
<td width="20%"><div align="center">item</div></td>
<td width="20%"><div align="center">New Activation</div></td>
<td width="20%"><div align="center">Commission</div></td>
<td width="20%"><div align="center">Price</div></td>
<td width="20%"><div align="center">MEID</div></td>
<td width="20%"><div align="center">Number</div></td>
</tr>
<td><div class="styled" align="center">
<select name="item" id="item">
<option value="">Phones/Devices</option>
<option value="">-----APPLE-----</option>
<option value="200.00" value2="20.00" value3="iPhone4">iPhone 4 8GB</option>
<option value="225.00" value2="20.00" value3="iPhone416">iPhone 4 16GB</option>
<option value="250.00" value2="20.00" value3="iPhone432">iPhone 4 32GB</option>
<option value="275.00" value2="20.00" value3="iPhone464">iPhone 4 64GB</option>
<option value="300.00" value2="20.00">iPhone 4S 8GB</option>
<option value="325.00" value2="20.00">iPhone 4S 16GB</option>
<option value="350.00" value2="20.00">iPhone 4S 32GB</option>
<option value="375.00" value2="20.00">iPhone 4S 64GB</option>
<option value="400.00" value2="20.00">iPhone 5</option>
<option value="500.00" value2="30.00">iPhone 5C</option>
<option value="625.00" value2="30.00">iPhone 5S</option>
<option value="">-----BlackBerry-----</option>
<option value="75.00" value2="5.00">Curve</option>
<option value="100.00" value2="5.00">Bold</option>
<option value="225.00" value2="10.00">Q10</option>
<option value="250.00" value2="10.00">Z10</option>
<option value="">-----HTC-----</option>
<option value="100.00" value2="5.00">Incredible</option>
<option value="150.00" value2="5.00">Incredible 2</option>
<option value="150.00" value2="5.00">Evo</option>
<option value="125.00" value2="5.00">Evo Shift</option>
<option value="200.00" value2="10.00">Evo LTE</option>
<option value="175.00" value2="10.00">Rhyme</option>
<option value="225.00" value2="10.00">Rezound</option>
<option value="400.00" value2="20.00">DNA</option>
<option value="450.00" value2="20.00">HTC One</option>
<option value="600.00" value2="20.00">HTC One M8</option>
<option value="">-----Huawei-----</option>
<option value="100.00" value2="5.00">Ascend Y</option>
<option value="150.00" value2="5.00">Ascend Plus</option>
<option value="">-----LG-----</option>
<option value="50.00" value2="5.00">Optimus Dynamic</option>
<option value="100.00" value2="5.00">Optimus Zip</option>
<option value="75.00" value2="5.00">Vortex</option>
<option value="100.00" value2="5.00">Enlighten</option>
<option value="250.00" value2="10.00">Lucid</option>
<option value="200.00" value2="10.00">Revolution</option>
<option value="250.00" value2="10.00">Spectrum</option>
<option value="450.00" value2="20.00">G2</option>
<option value="">-----Motorola-----</option>
<option value="100.00" value2="5.00">Droid 2</option>
<option value="175.00" value2="5.00">Droid 3</option>
<option value="200.00" value2="10.00">Droid 4</option>
<option value="225.00" value2="10.00">Bionic</option>
<option value="250.00" value2="10.00">Razr</option>
<option value="275.00" value2="10.00">Razr Maxx</option>
<option value="300.00" value2="10.00">Razr HD</option>
<option value="350.00" value2="20.00">Moto X</option>
<option value="300.00" value2="20.00">Moto G</option>
<option value="350.00" value2="20.00">Droid Ultra</option>
<option value="">-----SAMSUNG-----</option>
<option value="200.00" value2="10.00">Galaxy Stellar</option>
<option value="250.00" value2="10.00">Galaxy Stratosphere 2</option>
<option value="225.00" value2="10.00">Galaxy Nexus</option>
<option value="225.00" value2="5.00">Epic 4G</option>
<option value="250.00" value2="10.00">Galaxy S2</option>
<option value="300.00" value2="20.00">Galaxy S3</option>
<option value="450.00" value2="20.00">Galaxy S4</option>
<option value="650.00" value2="30.00">Galaxy S5</option>
<option value="450.00" value2="20.00">Galaxy Note ll</option>
<option value="600.00" value2="30.00">Galaxy Note lll</option>
</select>
</div></td>
<td><div class="styled" align="center">
<select name="item1" id="item1">
<option value="">New Activation?</option>
<option value="5.00">YES</option>
<option value="0.00">NO</option>
</select>
</div></td>
<span style="visibility:hidden;display:none;" id="phones"></span>
<td><div align="center">
<span id="cost"></span>
</div></td>
<td><div align="center">
<span id="price"></span>
</div></td>
<td>
<div align="center">
<input name="meid" type="Text" id="meid"/>
</div>
</td>
<td>
<div align="center">
<input name="number" type="Text" id="number"/>
</div>
</td>
</tr>
and the javascript
var item = document.getElementById('item');
var item1 = document.getElementById('item1');
item.onchange = function() {
price.innerHTML = "$" + this.value;
cost.innerHTML = "$" + (this[this.selectedIndex].getAttribute('value2'));
phone.innerHTML = "" + (this[this.selectedIndex].getAttribute('value3'));
};
and here is a jsfiddle
after messing around with this modified script i think that this is the line that is not working properly
var commission = +phoneEl.getAttribute("value2");
I cant figure out what is wrong. http://jsfiddle.net/3zf8G/4/
Here:
var phoneEl = document.getElementById('item');
var activationEl = document.getElementById('item1');
function updatePrice() {
var phonePrice = +phoneEl.value;
price.innerHTML = "$"+phonePrice;
}
function updateCommission() {
var commission = +phoneEl.options[phoneEl.selectedIndex].getAttribute("value2"),
activationPrice = +activationEl.value,
totalCommission = commission + activationPrice;
cost.innerHTML = "$" + totalCommission;
}
phoneEl.onchange = function() {
updatePrice();
updateCommission();
};
activationEl.onchange = function() {
updatePrice();
updateCommission();
};
fiddle: http://jsfiddle.net/3zf8G/5/
You're not converting the values stored in your value and value2 attributes to numbers; you can parse a string into a number by preceding it with a +. And you're not watching for changes to the activation drop down. Also the variable phone is not defined. I changed your variable names for the sake of clarity.
I am trying to create a main drop down box which control multiple drop down box. This multiple drop down box created in loop so i need dynamic script which works on class or id.
example -
<form method="post" name="postage">
Select All
<select id="options1" name="se1" >
<option value="0" >-- Select --</option>
<option value="Royal Mail">Royal mail</option>
<option value="USP courier">USP courier</option>
<option value="Standard courier">Standard courier</option>
<option value="DHL courier">DHL courier</option>
</select>
Select Manually-
<select id="options2" name="se2" >
<option value="0" >-- Select --</option>
<option value="Royal Mail">Royal mail</option>
<option value="USP courier">USP courier</option>
<option value="Standard courier">Standard courier</option>
<option value="DHL courier">DHL courier</option>
</select>
<select id="options3" name="se3" >
<option value="0" >-- Select --</option>
<option value="Royal Mail">Royal mail</option>
<option value="USP courier">USP courier</option>
<option value="Standard courier">Standard courier</option>
<option value="DHL courier">DHL courier</option>
</select>
<select id="options3" name="se4" >
<option value="0" >-- Select --</option>
<option value="Royal Mail">Royal mail</option>
<option value="USP courier">USP courier</option>
<option value="Standard courier">Standard courier</option>
<option value="DHL courier">DHL courier</option>
</select>
<input type="submit" name="submit_result" />
</form>
I found one script but i don't know where to change -
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
$('.west-yorkshire').change(function({
var value = $(this).val();
$('.className').each(function(
$(this).val(value);
alert(value);
));
}));
}//]]>
</script>
Is this what you were trying to achieve ? http://jsfiddle.net/9R9DV/2/
Changed some JS code
$(document).ready(function(){
$('#options1').change(function(){
var value = $(this).val();
$('.manual').each(function(){
$(this).val(value);
});
});
});
and classes to HTML code
<select class="manual" id="options2" name="se2" >
...
<select class="manual" id="options3" name="se3" >
...
etc.