dropdown value 'onthouden'
Indien je een waarde wijzigt van een inputbox en je voert de functie swapTd
uit wordt de gewijzigde waarde niet zomaar onthouden in Chrome, FF, Opera, Safari
(in IE wel maar dat terzijde)
Hiervoor heb ik een functie setValue in het leven geroepen die de value van een inputbox set na het veliezen van de focus
en wordt zodoende wel onthouden.
Probleem is echter in geval van de dropdown dat een gewijzigde waarde niet onthouden wordt.
Zet bijvoorbeeld de dropdown op waarde 2 en swap -> de dropdown staat weer op 1.
Nou heb ik daar wel een oplossing voor gevonden echter bevat deze een aantal trukendozen terwijl ik eigenlijk een simpele
en elegante oplossing zoek net als bij het setten van de value voor een inputbox.
Iemand een idee?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<table>
<tr>
<td id=content1><input id=amount1 onblur=setValue('amount1') value=20></td>
<td id=content2><input id=amount2 onblur=setValue('amount2') value=30></td>
<td id=content3>
<select id=amount3 onblur=setValue('amount3')>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
</select>
</td>
</tr>
</table>
<input type=button onclick=swapTds('content1','content2') value='swap 1 & 2'>
<input type=button onclick=swapTds('content2','content3') value='swap 2 & 3'>
<script>
function swapTds(elementId1, elementId2)
{
temp = document.getElementById(elementId1).innerHTML;
document.getElementById(elementId1).innerHTML = document.getElementById(elementId2).innerHTML;
document.getElementById(elementId2).innerHTML = temp;
}
function setValue(elementId)
{
myValue = document.getElementById(elementId).value;
document.getElementById(elementId).setAttribute('value',myValue);
}
</script>
<tr>
<td id=content1><input id=amount1 onblur=setValue('amount1') value=20></td>
<td id=content2><input id=amount2 onblur=setValue('amount2') value=30></td>
<td id=content3>
<select id=amount3 onblur=setValue('amount3')>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
</select>
</td>
</tr>
</table>
<input type=button onclick=swapTds('content1','content2') value='swap 1 & 2'>
<input type=button onclick=swapTds('content2','content3') value='swap 2 & 3'>
<script>
function swapTds(elementId1, elementId2)
{
temp = document.getElementById(elementId1).innerHTML;
document.getElementById(elementId1).innerHTML = document.getElementById(elementId2).innerHTML;
document.getElementById(elementId2).innerHTML = temp;
}
function setValue(elementId)
{
myValue = document.getElementById(elementId).value;
document.getElementById(elementId).setAttribute('value',myValue);
}
</script>
Toevoeging op 12/06/2012 12:50:20:
ik heb nou het volgende maar dat werkt niet...
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function setValueSelect(elementId)
{
mySelectValue = document.getElementById(elementId).value;
mySelect = document.getElementById(elementId);
for (var i=0; i < mySelect.length; i++)
{
if (mySelect.options[i].value == mySelectValue)
{
mySelect.options[i].setAttribute('selected','selected');
}
}
}
{
mySelectValue = document.getElementById(elementId).value;
mySelect = document.getElementById(elementId);
for (var i=0; i < mySelect.length; i++)
{
if (mySelect.options[i].value == mySelectValue)
{
mySelect.options[i].setAttribute('selected','selected');
}
}
}
Gewijzigd op 12/06/2012 11:26:24 door Hank Noseman
Twee vraagjes:
Komen er meerdere select-boxes voor of slechts 1? (ik zie slechts 1 tabel rij ...)
Een tabel-cel waar die select in voorkomt; bevat niets anders dan die select. Juist?
2) Juist
Hank Noseman op 12/06/2012 15:06:28:
1) Slechts 1
Okay, dan kan het vrij simpel, door id="amount3" gewoon hard coded te gebruiken.
Dit moet werken
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
function swapTds(elementId1, elementId2)
{
var select_value = document.getElementById('amount3').value;
temp = document.getElementById(elementId1).innerHTML;
document.getElementById(elementId1).innerHTML = document.getElementById(elementId2).innerHTML;
document.getElementById(elementId2).innerHTML = temp;
document.getElementById('amount3').value = select_value;
}
{
var select_value = document.getElementById('amount3').value;
temp = document.getElementById(elementId1).innerHTML;
document.getElementById(elementId1).innerHTML = document.getElementById(elementId2).innerHTML;
document.getElementById(elementId2).innerHTML = temp;
document.getElementById('amount3').value = select_value;
}
(laat ons zeggen dat het meer simpel is dan elegant)
----------------
Ofwel, een beetje generieker ...
.value werkt zowel voor een text input als voor een select (en nog andere...)
Dan kan je zoiets doen
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function swapTds(elementId1, elementId2)
{
//initiele waarde tijdelijk opslaan
var childElement1 = document.getElementById(elementId1).children[0];
var childElement2 = document.getElementById(elementId2).children[0];
var childValue1 = childElement1.value;
var childValue2 = childElement2.value;
// innerHTML swappen
var temp = document.getElementById(elementId1).innerHTML;
document.getElementById(elementId1).innerHTML = document.getElementById(elementId2).innerHTML;
document.getElementById(elementId2).innerHTML = temp;
//initiele waarde terugzetten
document.getElementById(elementId1).children[0].value = childValue2;
document.getElementById(elementId2).children[0].value = childValue1;
}
{
//initiele waarde tijdelijk opslaan
var childElement1 = document.getElementById(elementId1).children[0];
var childElement2 = document.getElementById(elementId2).children[0];
var childValue1 = childElement1.value;
var childValue2 = childElement2.value;
// innerHTML swappen
var temp = document.getElementById(elementId1).innerHTML;
document.getElementById(elementId1).innerHTML = document.getElementById(elementId2).innerHTML;
document.getElementById(elementId2).innerHTML = temp;
//initiele waarde terugzetten
document.getElementById(elementId1).children[0].value = childValue2;
document.getElementById(elementId2).children[0].value = childValue1;
}
Gewijzigd op 12/06/2012 15:44:25 door Kris Peeters