Обработка запроса удаленно по выбору select

283
21 января 2017, 12:43

Друзья, помогите разобраться пожалуйста! Пытаюсь разобраться с jquery, задача следующая: при выборе марки машины из селекта, в соседнем div появляется результат в виде второго селекта, где нужно выбрать модель. С помощью яндекспоиска, с миру по нитке получился вот такой кусок кода:

ps: сразу о проблеме, все работает, только после выбора марки селект блокируется и возможно выбрать только модель, а так быть не должно, помогите найти проблему, спасибо!

$(function(){ 
    //Живой поиск 
    $('.car').click(function(){ 
            $.ajax({ 
                type: 'post', 
                url: "findcar.php", //Путь к обработчику 
                data: {'car_referal':this.value}, 
                response: 'html', 
                success: function(data){ 
                    $(".car_search_result").html(data); //Выводим полученые данные в списке 
                } 
            }) 
    }) 
 
})

выбор марки: 

<div style="float:left; display:inline-block;"> 
<select name="car_referal" size="1" class="car"> 
<option value="-----">-----</option><?php 
$result_brands = mysql_query("SELECT * FROM brands ORDER BY brand_name"); 
while ($row_brands = mysql_fetch_array($result_brands)){ 
print "<option value='".$row_brands[brand_id]."'>".$row_brands[brand_name]."</option>"; 
}//while_brands 
?></select>  </div> 
<div style="position:relative; left:20px;" class="car_search_result"></div>

выбор модели (обрабатывается в файле findcar.php)

<? 
include('adm/connect.php'); 
if(!empty($_POST["car_referal"])){ //Принимаем данные 
$referal = $_POST["car_referal"];  
$result_service = mysql_query("select * from models where brand_id='$referal'"); 
?><select ><option value="-----">-----</option><? 
while ($row_service = mysql_fetch_array($result_service)){ 
if ($car != '0'){ 
print "<option value='-----'>".$row_service[model_name]."</option</select><br>"; 
} 
} 
} 
?>

итоговая страница

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html><head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
 
    <script>   
$(function(){ 
    //Живой поиск 
    $('.car').click(function(){ 
            $.ajax({ 
                type: 'post', 
                url: "findcar.php", //Путь к обработчику 
                data: {'car_referal':this.value}, 
                response: 'html', 
                success: function(data){ 
                    $(".car_search_result").html(data); //Выводим полученые данные в списке 
                } 
            }) 
                return false;   
$(".car").attr("disabled",""); 
    }) 
 
}) 
    </script>   
 
<link rel="stylesheet" type="text/css" href="css/tabl.css"> 
<link rel="stylesheet" type="text/css" href="css/search.css"> 
</head><body> 
     
 
 
<form method="post"> 
    <table width="633" border='1'> 
        <tr> 
            <td width="27%">ФИО</td> 
            <td width="70%" align="left"> 
                <p><input type="text" name="fio"> - пример: Иванов Иван Иваныч</p> 
            </td> 
        </tr> 
        <tr> 
            <td width="27%">Марка, модель</td> 
            <td width="70%" align="left"> 
 
<div style="float:left; display:inline-block;"> 
<select name="car_referal" size="1" class="car"> 
<option value="-----">-----</option><option value='1'>AC</option><option value='2'>Acura</option><option value='3'>Alfa Romeo</option><option value='4'>Alpine</option><option value='5'>AM General</option><option value='6'>Ariel</option><option value='7'>Aro</option><option value='8'>Asia</option><option value='9'>Aston Martin</option><option value='10'>Audi</option><option value='11'>Austin</option><option value='12'>Autobianchi</option><option value='13'>Baltijas Dzips</option><option value='14'>Beijing</option><option value='15'>Bentley</option><option value='16'>Bertone</option><option value='17'>Bitter</option><option value='18'>BMW</option><option value='19'>BMW Alpina</option><option value='20'>Brabus</option><option value='21'>Brilliance</option><option value='22'>Bristol</option><option value='23'>Bufori</option><option value='24'>Bugatti</option><option value='25'>Buick</option><option value='26'>BYD</option><option value='27'>Byvin</option><option value='28'>Cadillac</option><option value='29'>Callaway</option><option value='30'>Carbodies</option><option value='31'>Caterham</option><option value='32'>Changan</option><option value='33'>ChangFeng</option><option value='34'>Chery</option><option value='35'>Chevrolet</option><option value='36'>Chrysler</option><option value='37'>Citroen</option><option value='38'>Cizeta</option><option value='39'>Coggiola</option><option value='40'>Dacia</option><option value='41'>Dadi</option><option value='42'>Daewoo</option><option value='43'>DAF</option><option value='44'>Daihatsu</option><option value='45'>Daimler</option><option value='46'>Dallas</option><option value='47'>Datsun</option><option value='48'>De Tomaso</option><option value='49'>DeLorean</option><option value='50'>Derways</option><option value='51'>Dodge</option><option value='52'>DongFeng</option><option value='53'>Doninvest</option><option value='54'>Donkervoort</option><option value='55'>E-Car</option><option value='56'>Eagle</option><option value='57'>Eagle Cars</option><option value='58'>Ecomotors</option><option value='59'>FAW</option><option value='60'>Ferrari</option><option value='61'>Fiat</option><option value='62'>Fisker</option><option value='63'>Ford</option><option value='64'>Foton</option><option value='65'>FSO</option><option value='66'>Fuqi</option><option value='67'>Geely</option><option value='68'>Geo</option><option value='69'>GMC</option><option value='70'>Gonow</option><option value='71'>Great Wall</option><option value='72'>Hafei</option><option value='73'>Haima</option><option value='282'>Hawtai</option><option value='74'>Hindustan</option><option value='75'>Holden</option><option value='76'>Honda</option><option value='77'>HuangHai</option><option value='78'>Hummer</option><option value='79'>Hyundai</option><option value='80'>Infiniti</option><option value='81'>Innocenti</option><option value='82'>Invicta</option><option value='83'>Iran Khodro</option><option value='84'>Isdera</option><option value='85'>Isuzu</option><option value='86'>IVECO</option><option value='87'>JAC</option><option value='88'>Jaguar</option><option value='89'>Jeep</option><option value='90'>Jensen</option><option value='91'>JMC</option><option value='92'>Kia</option><option value='93'>Koenigsegg</option><option value='94'>KTM</option><option value='95'>Lamborghini</option><option value='96'>Lancia</option><option value='97'>Land Rover</option><option value='98'>Landwind</option><option value='99'>Lexus</option><option value='100'>Liebao Motor</option><option value='101'>Lifan</option><option value='102'>Lincoln</option><option value='103'>Lotus</option><option value='104'>LTI</option><option value='105'>Luxgen</option><option value='106'>Mahindra</option><option value='107'>Marcos</option><option value='108'>Marlin</option><option value='109'>Marussia</option><option value='110'>Maruti</option><option value='111'>Maserati</option><option value='112'>Maybach</option><option value='113'>Mazda</option><option value='114'>McLaren</option><option value='115'>Mega</option><option value='116'>Mercedes-Benz</option><option value='117'>Mercury</option><option value='118'>Metrocab</option><option value='119'>MG</option><option value='120'>Microcar</option><option value='121'>Minelli</option><option value='122'>Mini</option><option value='123'>Mitsubishi</option><option value='124'>Mitsuoka</option><option value='125'>Morgan</option><option value='126'>Morris</option><option value='127'>Nissan</option><option value='128'>Noble</option><option value='129'>Oldsmobile</option><option value='130'>Opel</option><option value='131'>Osca</option><option value='132'>Pagani</option><option value='133'>Panoz</option><option value='134'>Perodua</option><option value='135'>Peugeot</option><option value='136'>Piaggio</option><option value='137'>Plymouth</option><option value='138'>Pontiac</option><option value='139'>Porsche</option><option value='140'>Premier</option><option value='141'>Proton</option><option value='142'>PUCH</option><option value='143'>Puma</option><option value='144'>Qoros</option><option value='145'>Qvale</option><option value='146'>Reliant</option><option value='147'>Renault</option><option value='148'>Renault Samsung</option><option value='149'>Rolls-Royce</option><option value='150'>Ronart</option><option value='151'>Rover</option><option value='152'>Saab</option><option value='153'>Saleen</option><option value='154'>Santana</option><option value='155'>Saturn</option><option value='156'>Scion</option><option value='157'>SEAT</option><option value='158'>ShuangHuan</option><option value='159'>Skoda</option><option value='160'>Smart</option><option value='161'>Soueast</option><option value='162'>Spectre</option><option value='163'>Spyker</option><option value='165'>Ssang Yong</option><option value='166'>Subaru</option><option value='167'>Suzuki</option><option value='168'>Talbot</option><option value='169'>TATA</option><option value='170'>Tatra</option><option value='171'>Tazzari</option><option value='172'>Tesla</option><option value='173'>Tianma</option><option value='174'>Tianye</option><option value='175'>Tofas</option><option value='176'>Toyota</option><option value='177'>Trabant</option><option value='178'>Tramontana</option><option value='179'>Triumph</option><option value='180'>TVR</option><option value='280'>Ultima</option><option value='181'>Vauxhall</option><option value='182'>Vector</option><option value='183'>Venturi</option><option value='184'>Volkswagen</option><option value='185'>Volvo</option><option value='186'>Vortex</option><option value='187'>Wartburg</option><option value='188'>Westfield</option><option value='189'>Wiesmann</option><option value='190'>Xin Kai</option><option value='191'>Zastava</option><option value='192'>Zotye</option><option value='193'>ZX</option><option value='212'>Автокам</option><option value='213'>Астро</option><option value='214'>Бронто</option><option value='215'>ВАЗ</option><option value='216'>ГАЗ</option><option value='211'>Ё-мобиль</option><option value='217'>ЗАЗ</option><option value='218'>ЗИЛ</option><option value='219'>ИЖ</option><option value='220'>КамАЗ</option><option value='221'>Канонир</option><option value='222'>ЛУАЗ</option><option value='223'>Москвич</option><option value='225'>СеАЗ</option><option value='224'>СМЗ</option><option value='226'>ТагАЗ</option><option value='227'>УАЗ</option></select>  </div> 
<div style="position:relative; left:20px;" class="car_search_result"></div> 
 
            </td> 
        </tr> 
        <tr> 
            <td width="27%">Гос.номер</td> 
            <td width="70%" align="left"> 
                <p><input type="text" name="car_mod"> - пример: А222МР77</p> 
            </td> 
        </tr> 
        <tr> 
            <td width="27%" height="14">Номер телефона</td> 
            <td width="70%" height="14" align="left"> 
                <p><input type="text" name="tel"></p> 
            </td> 
        </tr> 
        <tr> 
            <td width="623" colspan="2"> 
                <p align="center"><b>-------------------------- АДРЕС --------------------------</b></p> 
            </td> 
        </tr> 
        <tr> 
            <td width="171" height="13"> 
                <p align="right">Улица:</p> 
            </td> 
            <td width="70%" height="13" align="left"> 
                <p><input type="text" name="street" size="33"></p> 
            </td> 
        </tr> 
        <tr> 
            <td width="27%" height="12"> 
                <p align="right">Дом</p> 
            </td> 
            <td width="70%" height="12" align="left"> 
                <p><input type="text" name="h_num" size="9"></p> 
            </td> 
        </tr> 
		        <tr> 
            <td width="27%" height="12"> 
                <p align="right">Корпус</p> 
            </td> 
            <td width="70%" height="12" align="left"> 
                <p><input type="text" name="h_ko" size="9"></p> 
            </td> 
        </tr> 
        <tr> 
            <td width="27%" height="35"> 
                <p align="right">Квартира</p> 
            </td> 
            <td width="70%" height="35" align="left"> 
                <p><input type="text" name="h_kv" size="9"></p> 
            </td> 
        </tr> 
        <tr> 
            <td width="27%" height="23"> 
                <p align="right">Подъезд</p> 
            </td> 
            <td width="70%" height="23" align="left"> 
                <p><input type="text" name="h_pd" size="9"></p> 
            </td> 
        </tr> 
        <tr> 
            <td width="27%" height="14"> 
                <p align="right">Этаж</p> 
            </td> 
            <td width="70%" height="14" align="left"> 
                <p><input type="text" name="h_et" size="9"></p> 
            </td> 
        </tr> 
        <tr> 
            <td width="27%" height="11"> 
                <p align="right">Домофон</p> 
            </td> 
            <td width="70%" height="11" align="left"> 
                <p><input type="text" name="h_kod" size="9"></p> 
            </td> 
        </tr> 
        <tr> 
            <td width="27%">Примечание</td> 
            <td width="70%" align="left"><textarea name="other" rows="2"></textarea></td> 
        </tr> 
 
        <tr> 
            <td width="633" colspan="2"> 
                <p align="center"><input type="submit" name="save" value="Сохранить"></p> 
            </td> 
        </tr> 
 
    </table> 
</form>

search.css 

 .search{ 
    position:relative; 
} 
 
.search_result{ 
    margin: 0 0 0 40px; 
    background: #FFF; 
    border: 0px #ccc solid; 
    width: 255px; 
    border-radius: 4px; 
    max-height:255px; 
    overflow-y:scroll; 
    display:none; 
} 
 
.search_result li{ 
    list-style: none; 
    padding: 5px 10px; 
    margin: 0 0 0 -40px; 
    border-bottom: 1px #ccc solid; 
    cursor: pointer; 
    transition:0.3s; 
 
} 
 
.search_result li:hover{ 
    background: #F9FF00; 
}

tabl.css

table { 
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; 
font-size: 14px; 
border-radius: 10px; 
border-spacing: 0; 
text-align: center; 
} 
th { 
background: #BCEBDD; 
color: white; 
text-shadow: 0 1px 1px #2D2020; 
padding: 10px 20px; 
} 
th, td { 
border-style: solid; 
border-width: 0 1px 1px 0; 
border-color: white; 
} 
th:first-child, td:first-child { 
text-align: left; 
} 
th:first-child { 
border-top-left-radius: 10px; 
} 
th:last-child { 
border-top-right-radius: 10px; 
border-right: none; 
} 
td { 
padding: 3px 10px; 
background: #F8E391; 
} 
tr:last-child td:first-child { 
border-radius: 0 0 0 10px; 
} 
tr:last-child td:last-child { 
border-radius: 0 0 10px 0; 
} 
tr td:last-child { 
border-right: none; 
}

Answer 1

Уберите строчку

$(".car").attr("disabled","");


var test = { 
  honda: "<select><option value='civic'>Civic</option><option value='accord'>Accord</option></select>", 
  toyota: "<select><option value='corolla'>Corolla</option><option value='camry'>Camry</option></select>" 
}; 
 
$('.car').change(function(){ 
   
  var brand = this.value; 
  setTimeout(function() { 
    var data = test[brand]; 
    $(".car_search_result").html(data); 
  }, 300); 
   
  //return false;   
  //$(".car").attr("disabled",""); 
 
  /*$.ajax({ 
    type: 'post', 
    url: "findcar.php", //Путь к обработчику 
    data: {'car_referal':this.value}, 
    response: 'html', 
    success: function(data){ 
      $(".car_search_result").html(data); 
    } 
  });*/ 
}); 
$('.car').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div> 
<select class="car" size="1"> 
  <option value="honda">Honda</option> 
  <option value="toyota">Toyota</option> 
</select> 
</div> 
 
<div class="car_search_result"> 
</div>

Answer 2

СПАСИБО, это работает!

<div> 
<select class="car" size="1" name="car_referal"> 
  <option value="1">Honda</option> 
  <option value="33">Toyota</option> 
</select> 
</div> 
 
<script>   
$('.car').change(function(){ 
 
 
  $.ajax({ 
    type: 'post', 
    url: "findcar.php", //Путь к обработчику 
    data: {'car_referal':this.value}, 
    response: 'html', 
    success: function(data){ 
      $(".car_search_result").html(data); 
    } 
  }); 
}); 
$('.car').change();  
</script>   
 
 
 
<div class="car_search_result"></div>

READ ALSO
Событие change не обрабатывает изменения в input
jQuery

Событие change не обрабатывает изменения в input

Вот пример на plunker http://plnkrco/edit/w6GzeQapcsIO4vn7ZfC2?p=preview

 272
Для каждого теста вывести в отдельной строке минимальный угол между стрелками в градусах в формате, приведенном в примере [требует правки]
c++

Для каждого теста вывести в отдельной строке минимальный угол между стрелками в градусах в формате, приведенном в примере [требует правки]

Интервал углов между часовой и минутной стрелками часов от 0 до 180 градусов (включая углы в 0 и 180 градусов)Например, когда на часах 12 часов,...

 276
Курсор в конец строки
c++

Курсор в конец строки

Есть edit control, на который я навожу фокус через setFocus, но при этом курсор оказывается в начале строкиКак его перенести в конец?

 381
Указатель на массив объектов класса
c++

Указатель на массив объектов класса

Создаётся в классе Logic массив объектов класса Players

 295