2016-04-14 2 views
0

Так у меня есть этот HTML-форму:JQuery Параметры обновления от Json Return

<select name="finder[4]" id="finder-2--4" class="pffield pf-make"> 
    <option value="0">Please Select...</option> 
    <option value="52505">Alfa Romeo</option> 
    <option value="52506">Audi</option> 
    <option value="52499">BMW</option> 
    <option value="52501">Ford</option> 
</select> 

Я это JQuery

<script type="text/javascript"> 
    jQuery("document").ready(function(){ 
     //console.log('on load'); 
    jQuery(".js-ajax-php-json").submit(function(){ 
     //console.log('post'); 
    var data = { 
    "action": "test" 
    }; 
    data = jQuery(this).serialize() + "&" + jQuery.param(data); 
    jQuery.ajax({ 
    type: "POST", 
    dataType: "json", 
    url: "/reglookup.php", //Relative or absolute path to response.php file 
    data: data, 
     success: function(data) { 
      console.log(data); 
      console.log(data['make']); 

      //$(".pf-make option:selected").text("Ford"); 
      //$(".pf-make option:contains(Ford)").attr('selected', true); 
      //$(".pf-make option[text=" + data["make"] +"]").attr("selected","selected"); 
      $(".pf-make").val('52499'); 
      alert("Form submitted successfully.\nReturned json: " + data["make"]); 
     } 
    }); 
    return false; 
    }); 
    }); 
</script> 

я получаю отдачу от JSon пост

Object {make: "Ford", model: "Focus", year: "2010", engine: 2.5, fuel: "Petrol"} 

Таким образом, почта и обратный вызов работают нормально, поскольку они входят в консоль, и мне нужно иметь возможность сделать обратный вызов, сделать данные ["make"] и u pdate выбранную опцию в форме выбора.

Вы можете видеть, что я попробовал несколько различных вариантов, даже руки, набрав «Форд» в коде, но я всегда кажется, чтобы получить следующее сообщение об ошибке обратно в консоли:

(index):221 Uncaught TypeError: Cannot read property 'val' of null 

За жизнь я не могу заставить это работать в данный момент.

+0

@VelimirTchatchevsky - Я не уверен, что вы имеете в виду здесь, я не силен в JQuery. –

ответ

1

получить значение параметра с помощью contains, затем установите выберите: -

var ford = $('.pf-make option:contains("Ford")').val(); 
 

 
$('.pf-make').val(ford);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="finder[4]" id="finder-2--4" class="pffield pf-make"> 
 
    <option value="0">Please Select...</option> 
 
    <option value="52505">Alfa Romeo</option> 
 
    <option value="52506">Audi</option> 
 
    <option value="52499">BMW</option> 
 
    <option value="52501">Ford</option> 
 
</select>

+0

Есть ли способ сделать это в jQuery 1.7? Я все еще получаю (индекс): 218 Uncaught TypeError: Не могу прочитать свойство «val» null с введенным кодом, но я вижу, что он работает в вашем примере с 2.2.1 –

+0

Ahh sussed it - jQuery вместо $ –

+1

Соблюдайте осторожность с этим ответом. Возможно, существует потенциальная уязвимость XSS. – MrCode

1

Вместо $ использования jQuery, а также использовать вместо data["make"] для data.make

+0

Спасибо за это - получилось, что он работает так –

1

Простой решение состоит в том, чтобы перебирать опции, чтобы найти соответствующий текст, а затем получить доступ к его значению.

var $select = jQuery('.pf-make'); 
var value = 0; 
$select.find('option').each(function(){ 
    if(jQuery(this).text() == data.make){ 
     value = jQuery(this).val(); 
     return false; 
    } 
}); 
$select.val(value); 
+0

как насчет '$ (this) .selected = true;' вместо 'value = $ (this) .val();'? –

0

см. Этот обновленный код. Пожалуйста, обратите внимание, что он использует ID, а не имя класса, чтобы сделать его более конкретным

<script type="text/javascript"> 
    jQuery("document").ready(function(){ 
     //console.log('on load'); 
    jQuery(".js-ajax-php-json").submit(function(){ 
     //console.log('post'); 
    var data = { 
    "action": "test" 
    }; 
    data = jQuery(this).serialize() + "&" + jQuery.param(data); 
    jQuery.ajax({ 
    type: "POST", 
    dataType: "json", 
    url: "/reglookup.php", //Relative or absolute path to response.php file 
    data: data, 
     success: function(data) { 
      jQuery("#finder-2--4").val(data.make); 
     } 
    }); 
    return false; 
    }); 
    }); 
</script> 
+0

Этот метод предполагает, что data.make - это идентификатор опции, не так ли? –

Смежные вопросы