Jquery select option toevoegen
Ik heb hier eens scriptje waarmee ik options toevoeg aan een select box.
Helaas werkt hij niet helemaal, de opties komen er niet in.
Weet iemand wat ik hier fout in doe?
Alvast bedankt
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function(){
$(".diensten").change(function()
{
var message_index
message_index = $(".diensten").val();
$("#extra").empty();
$("#extra").attr("disabled", false);
if(message_index > 0){
var myOptions = {
1 : 'Schoonmaak bedrijfshal',
2 : 'Reguliere schoonmaak'
};
$.each(myOptions, function(val, text) {
$('#extra').append(
$('<option></option>').val(val).html(text)
);
});
}
});
});
$(".diensten").change(function()
{
var message_index
message_index = $(".diensten").val();
$("#extra").empty();
$("#extra").attr("disabled", false);
if(message_index > 0){
var myOptions = {
1 : 'Schoonmaak bedrijfshal',
2 : 'Reguliere schoonmaak'
};
$.each(myOptions, function(val, text) {
$('#extra').append(
$('<option></option>').val(val).html(text)
);
});
}
});
});
Code (php)
1
Specifieke dienst: <select id="extra" disabled="disabled"><option value="0">-</option></select>
Maar ik denk dat het komt door:
$("#extra").attr("disabled", false);
Nu zet je dus de waarde van disabled op false, want het is geen property van dat element, maar gewoon een waarde die je in de tag zet.
Dus je moet die attribute verwijderen.
Zie de jquery docs: http://docs.jquery.com
Als ik hem eruit haal werkt het nog steeds niet,
Verder weet ik niet wat de classe diensten heeft, en of die dus veranderd.
Bij mij, in een simpele test was dit het enige probleem (afgezien van die rotzooi die ik er omheen weg moest halen).
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready(function(){
$(".diensten").change(function()
{
var message_index
message_index = $(".diensten").val();
$("#extra").empty().removeAttr("disabled");
if(message_index > 0){
var myOptions = {
1 : 'Schoonmaak bedrijfshal',
2 : 'Reguliere schoonmaak'
};
$.each(myOptions, function(val, text) {
$('#extra').append(
$('<option></option>').val(val).html(text)
);
});
}
});
});
$(".diensten").change(function()
{
var message_index
message_index = $(".diensten").val();
$("#extra").empty().removeAttr("disabled");
if(message_index > 0){
var myOptions = {
1 : 'Schoonmaak bedrijfshal',
2 : 'Reguliere schoonmaak'
};
$.each(myOptions, function(val, text) {
$('#extra').append(
$('<option></option>').val(val).html(text)
);
});
}
});
});
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<select class="diensten" name="Dienst1[1]">
<option value="0" selected="selected" disabled="disabled">-</option>
<option value="Huishoudelijke hulp">Huishoudelijke hulp</option>
<option value="Persoonlijke diensten">Persoonlijke diensten</option>
<option value="Klussen">Klussen</option><option value="Tuinhulp">Tuinhulp</option>
<option value="Verhuishulp">Verhuishulp</option><option value="Oppas">Oppas</option>
<option value="Huiswerkbegeleiding">Huiswerkbegeleiding</option>
</select>
<option value="0" selected="selected" disabled="disabled">-</option>
<option value="Huishoudelijke hulp">Huishoudelijke hulp</option>
<option value="Persoonlijke diensten">Persoonlijke diensten</option>
<option value="Klussen">Klussen</option><option value="Tuinhulp">Tuinhulp</option>
<option value="Verhuishulp">Verhuishulp</option><option value="Oppas">Oppas</option>
<option value="Huiswerkbegeleiding">Huiswerkbegeleiding</option>
</select>
Het enige probleem is dat hij de options moet toevoegd.
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function(){
$(".diensten").change(function()
{
var message_index
message_index = $(".diensten").val();
$(".specific").empty();
if(message_index > 0){
var myOptions = {
1 : 'Schoonmaak bedrijfshal',
2 : 'Reguliere schoonmaak'
};
$('.specific').html('<select name="specific">');
$.each(myOptions, function(val, text) {
$('.specific').append('<option value="' + val +'">' + text +'</option>');
});
$('.specific').append('</select>');
}
});
});
$(".diensten").change(function()
{
var message_index
message_index = $(".diensten").val();
$(".specific").empty();
if(message_index > 0){
var myOptions = {
1 : 'Schoonmaak bedrijfshal',
2 : 'Reguliere schoonmaak'
};
$('.specific').html('<select name="specific">');
$.each(myOptions, function(val, text) {
$('.specific').append('<option value="' + val +'">' + text +'</option>');
});
$('.specific').append('</select>');
}
});
});
De selectbox is nu weg en ik heb er een div van gemaakt.
Weet iemand hoe ik dit kan oplossen.
Dit zou correcte code zijn:
Code (php)
1
2
3
4
2
3
4
$('.specific').html('<select name="specific"></select>');
$.each(myOptions, function(val, text) {
$('.specific > select').append('<option value="' + val +'">' + text +'</option>');
});
$.each(myOptions, function(val, text) {
$('.specific > select').append('<option value="' + val +'">' + text +'</option>');
});
of
Code (php)
1
2
3
4
5
6
2
3
4
5
6
var tmp = '<select name="specific">';
$.each(myOptions, function(val, text) {
tmp += '<option value="' + val +'">' + text +'</option>';
});
tmp += '</select>';
$('.specific').html(tmp);
$.each(myOptions, function(val, text) {
tmp += '<option value="' + val +'">' + text +'</option>';
});
tmp += '</select>';
$('.specific').html(tmp);
Gewijzigd op 04/07/2010 11:57:19 door Piet Verhagen