3

I have a form in which two selects are correlated. After selecting a value from the first, an ajax call is triggered to recover the values of the second one. I use this form for both insert and edit of the data. The first case is all smooth. The edit instead doesn't cooperate because when I try to set the selected value of the second select the operation doesn't show anything. Here's the code:

HTML

<select class="inputtext" id="category" name="category" onchange="loadsub(); return false;">
    <option value="0"> -- </option>
    <?php code to load the values ?>
</select>   
<br />  
<strong>Subcategory</strong>                
<select class="inputtext" id="subcategory" name="subcategory">
    <option value="0"> -- </option>
</select>

AJAX 

function open(id, edit) {
    $('#prod').css("display", "block");
    request= 2;
    $.ajax({
        type: "POST",
        dataType: "json",
        url: "ajax/prod.php",
        data: {
            id: id,
            richiesta: request
        },
        async: true,
        success : function(data) {
            var i = 0;
            var tmp = '';

            if (data) {
                while(i<data.length) {
                    $('#category option[value="'+data[0]['categoria']+'"]').attr('selected', 'selected');
                    loadsub();
                    subcat= data[0]['subcategory'];
                    if (edit == 1) {
                        $('#categoria').attr("disabled", true);
                        $('#sottocategoria').attr("disabled", true);
                    }
                    i++;
                }               
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) { 
            //alert("Status: " + textStatus);
            //alert("Error: " + errorThrown); 
        },
        complete: function () {
            $('#subcategory option[value="' + subcat + '"]').attr('selected', 'selected');
        }
    });
}
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Jannuzzo
  • 169
  • 1
  • 4
  • 12
  • [This][1] answer by Guffa may help. [1]: http://stackoverflow.com/questions/14115016/jquery-val-not-working-on-option-appended-through-ajax – Aparna Oct 05 '15 at 07:53

2 Answers2

0

You should use $.fn.val(value) to value and move it to end of success callback method 

    success : function(data) {
        //Your code
        if(subcat){
            $('#subcategory').val(subcat);
        }
    },

I would recommend you to start using $.fn.prop() intsead of $.fn.attr() to set properties. A good read .prop() vs .attr()

To set disabled use

$('#categoria').prop("disabled", true); //true to disable or false to enable
Community
  • 1
  • 1
Satpal
  • 132,252
  • 13
  • 159
  • 168
  • Thank you for the advice, but the #subcat select is still unselected. I mean the value is right but the user can't see any selection. – Jannuzzo May 28 '15 at 08:27
0

don't use select tag to display ajax view use div or other tag. because already select tag used in ajax page
like your example 

<select class="input text" id="category" name="category" on change="load sub(); return false;">
    <option value="0"> -- </option>
    <?  code to load the values ?>
</select>   

<strong>Subcategory</strong>                
<div class="input text" id="subcategory" >
    here is your ajax call
</div>
Jawwad
  • 1
  • 1