0

У меня есть такой HTML, он загружается на сайте в эту контент

<div id="ad-car-detail-content">
 </div>
<script type="text/javascript" charset="utf-8" src="http://avtousta.ucoz.com/js/board/add-cars-board.js"></script> 

функция такая. при выборе select тег загружается нужный марка или модель автомобиля. Это обычный скрипт написанный мной, работает отлично нужного марку и модель загружается как надо. Но тут есть одно проблема который при выборе марку select на этом INPUT должен меняться ID и VALUE

<input class="catSelector9" checked="checked" type="button" value="2" name="ocat" id="cus2">

А при выборе модель на этом INPUT должен меняться VALUE от OPTION текст

пример вот так. Есть такой тег

<select id="car_model_id"><option value="0">A7</option></select>
<input value="0" type="button" id="bdF1" name="title">

При выборе option Получилось так

<select id="car_model_id"><option value="0">A7</option></select>
<input value="A7" type="button" id="bdF1" name="title">

На этом сайте мне помогли такой скрипт на обоих функции

<script>$("select.car_Marka").on("change", function() {var selected_option = $("select.car_Marka option:selected");$("input.catSelector9").attr("id", selected_option.attr("id")).attr("value", selected_option.attr("value"));});</script>

и здесь нашел такой скрипт переделал

<script>$("select#car_model_id").change(function () {var str = "";$("select#car_model_id option:selected").each(function() {str += $( this ).text() + " ";});$("input#bdF1").val( str );}).change();</script>

На компьютере создаю test html сохраняю это скрипты и это код

<div class="manTable" id="bdM64"><div id="bdM49"><div class="manTd2" id="bdM51"><select id="bdF18" class="manFlFlt1" name="filter1" onchange="fillMark();"><option id="bdM50" value="0">Avtomobil: Tipi</option><option value="1">Minik avtomobilləri</option><option value="2">Minik avtomobilləri kommersiya</option><option value="3">Yük Avtomobilləri</option><option value="4">Avtobuslar</option><option value="5">Qoşqu dartanlar</option><option value="6">Qoşqular</option><option value="7">Çıxarıla bilinən kuzalar</option><option value="8">Motoskletlər</option><option value="9">Baggilər</option><option value="10">Skuterlər</option><option value="11">Moto yolsuzluq</option><option value="12">Karting</option><option value="13">Yolsuzluq moto amfibi</option><option value="14">Yolsuzluq Qar üçün</option></select></div></div><div id="bdM61"><div class="manTd2" id="bdM63"><input class="catSelector9" checked="checked" type="button" value="2" name="ocat" id="cus2"><div id="car_mark"><select class="car_Marka" id="car_Marka" onchange="fillModel();"><option id="0" value="0">Marka: Seçin</option><option value="90001" id="cus90001">AC</option><option value="90002" id="cus90002">Acura</option><option value="90003" id="cus90003">Adler</option><option value="90004" id="cus90004">Alfa Romeo</option><option value="90005" id="cus90005">Alpina</option><option value="90006" id="cus90006">Alpine</option><option value="90007" id="cus90007">AM General</option><option value="90008" id="cus90008">AMC</option><option value="90009" id="cus90009">Ariel</option><option value="90010" id="cus90010">Aro</option><option value="90011" id="cus90011">Asia</option><option value="90012" id="cus90012">Aston Martin</option><option value="90013" id="cus90013">Audi</option><option value="90014" id="cus90014">Austin</option><option value="90015" id="cus90015">Autobianchi</option><option value="90016" id="cus90016">Baltijas Dzips</option><option value="90017" id="cus90017">Beijing</option><option value="90018" id="cus90018">Bentley</option><option value="90019" id="cus90019">Bertone</option><option value="90020" id="cus90020">Bitter</option><option value="90021" id="cus90021">BMW</option><option value="90022" id="cus90022">Borgward</option><option value="90023" id="cus90023">Brabus</option><option value="90024" id="cus90024">Brilliance</option><option value="90025" id="cus90025">Bristol</option><option value="90026" id="cus90026">Bufori</option><option value="90027" id="cus90027">Bugatti</option><option value="90028" id="cus90028">Buick</option><option value="90029" id="cus90029">BYD</option><option value="90030" id="cus90030">Byvin</option><option value="90031" id="cus90031">Cadillac</option><option value="90032" id="cus90032">Callaway</option><option value="90033" id="cus90033">Carbodies</option><option value="90034" id="cus90034">Caterham</option><option value="90035" id="cus90035">Changan</option><option value="90036" id="cus90036">ChangFeng</option><option value="90037" id="cus90037">Chery</option><option value="90038" id="cus90038">Chevrolet</option><option value="90039" id="cus90039">Chrysler</option><option value="90040" id="cus90040">Citroen</option><option value="90041" id="cus90041">Cizeta</option><option value="90042" id="cus90042">Coggiola</option><option value="90043" id="cus90043">Dacia</option><option value="90044" id="cus90044">Dadi</option><option value="90045" id="cus90045">Daewoo</option><option value="90046" id="cus90046">DAF</option><option value="90047" id="cus90047">Daihatsu</option><option value="90048" id="cus90048">Daimler</option><option value="90049" id="cus90049">Datsun</option><option value="90050" id="cus90050">De Tomaso</option><option value="90051" id="cus90051">DeLorean</option><option value="90052" id="cus90052">Derways</option><option value="90053" id="cus90053">DeSoto</option><option value="90054" id="cus90054">Dodge</option><option value="90055" id="cus90055">DongFeng</option><option value="90056" id="cus90056">Doninvest</option><option value="90057" id="cus90057">Donkervoort</option><option value="90058" id="cus90058">DS</option><option value="90059" id="cus90059">E-Car</option><option value="90060" id="cus90060">Eagle</option><option value="90061" id="cus90061">Eagle Cars</option><option value="90062" id="cus90062">Ecomotors</option><option value="90063" id="cus90063">FAW</option><option value="90064" id="cus90064">Ferrari</option><option value="90065" id="cus90065">Fiat</option><option value="90066" id="cus90066">Fisker</option><option value="90067" id="cus90067">Ford</option><option value="90068" id="cus90068">Foton</option><option value="90069" id="cus90069">FSO</option><option value="90070" id="cus90070">Fuqi</option><option value="90071" id="cus90071">Geely</option><option value="90072" id="cus90072">Geo</option><option value="90073" id="cus90073">GMC</option><option value="90074" id="cus90074">Gonow</option><option value="90075" id="cus90075">Gordon</option><option value="90076" id="cus90076">Great Wall</option><option value="90077" id="cus90077">Hafei</option><option value="90078" id="cus90078">Haima</option><option value="90079" id="cus90079">Haval</option><option value="90080" id="cus90080">Hawtai</option><option value="90081" id="cus90081">Hindustan</option><option value="90082" id="cus90082">Holden</option><option value="90083" id="cus90083">Honda</option><option value="90084" id="cus90084">HuangHai</option><option value="90085" id="cus90085">Hummer</option><option value="90086" id="cus90086">Hyundai</option><option value="90087" id="cus90087">Infiniti</option><option value="90088" id="cus90088">Innocenti</option><option value="90089" id="cus90089">Invicta</option><option value="90090" id="cus90090">Iran Khodro</option><option value="90091" id="cus90091">Isdera</option><option value="90092" id="cus90092">Isuzu</option><option value="90093" id="cus90093">IVECO</option><option value="90094" id="cus90094">JAC</option><option value="90095" id="cus90095">Jaguar</option><option value="90096" id="cus90096">Jeep</option><option value="90097" id="cus90097">Jensen</option><option value="90098" id="cus90098">JMC</option><option value="90099" id="cus90099">Kia</option><option value="90100" id="cus90100">Koenigsegg</option><option value="90101" id="cus90101">KTM</option><option value="90102" id="cus90102">Lamborghini</option><option value="90103" id="cus90103">Lancia</option><option value="90104" id="cus90104">Land Rover</option><option value="90105" id="cus90105">Landwind</option><option value="90106" id="cus90106">Lexus</option><option value="90107" id="cus90107">Liebao Motor</option><option value="90108" id="cus90108">Lifan</option><option value="90109" id="cus90109">Lincoln</option><option value="90110" id="cus90110">Lotus</option><option value="90111" id="cus90111">LTI</option><option value="90112" id="cus90112">Luxgen</option><option value="90113" id="cus90113">Mahindra</option><option value="90114" id="cus90114">Marcos</option><option value="90115" id="cus90115">Marlin</option><option value="90116" id="cus90116">Marussia</option><option value="90117" id="cus90117">Maruti</option><option value="90118" id="cus90118">Maserati</option><option value="90119" id="cus90119">Maybach</option><option value="90120" id="cus90120">Mazda</option><option value="90121" id="cus90121">McLaren</option><option value="90122" id="cus90122">Mega</option><option value="90123" id="cus90123">Mercedes-Benz</option><option value="90124" id="cus90124">Mercury</option><option value="90125" id="cus90125">Metrocab</option><option value="90126" id="cus90126">MG</option><option value="90127" id="cus90127">Microcar</option><option value="90128" id="cus90128">Minelli</option><option value="90129" id="cus90129">MINI</option><option value="90130" id="cus90130">Mitsubishi</option><option value="90131" id="cus90131">Mitsuoka</option><option value="90132" id="cus90132">Morgan</option><option value="90133" id="cus90133">Morris</option><option value="90134" id="cus90134">Nissan</option><option value="90135" id="cus90135">Noble</option><option value="90136" id="cus90136">Oldsmobile</option><option value="90137" id="cus90137">Opel</option><option value="90138" id="cus90138">Osca</option><option value="90139" id="cus90139">Packard</option><option value="90140" id="cus90140">Pagani</option><option value="90141" id="cus90141">Panoz</option><option value="90142" id="cus90142">Perodua</option><option value="90143" id="cus90143">Peugeot</option><option value="90144" id="cus90144">PGO</option><option value="90145" id="cus90145">Piaggio</option><option value="90146" id="cus90146">Plymouth</option><option value="90147" id="cus90147">Pontiac</option><option value="90148" id="cus90148">Porsche</option><option value="90149" id="cus90149">Premier</option><option value="90150" id="cus90150">Proton</option><option value="90151" id="cus90151">PUCH</option><option value="90152" id="cus90152">Puma</option><option value="90153" id="cus90153">Qoros</option><option value="90154" id="cus90154">Qvale</option><option value="90155" id="cus90155">Ravon</option><option value="90156" id="cus90156">Reliant</option><option value="90157" id="cus90157">Renaissance</option><option value="90158" id="cus90158">Renault</option><option value="90160" id="cus90160">Rezvani</option><option value="90161" id="cus90161">Rimac</option><option value="90162" id="cus90162">Rolls-Royce</option><option value="90163" id="cus90163">Ronart</option><option value="90164" id="cus90164">Rover</option><option value="90165" id="cus90165">Saab</option><option value="90166" id="cus90166">Saleen</option><option value="90167" id="cus90167">Santana</option><option value="90168" id="cus90168">Saturn</option><option value="90169" id="cus90169">Renault Samsung</option><option value="90170" id="cus90170">SEAT</option><option value="90171" id="cus90171">ShuangHuan</option><option value="90172" id="cus90172">Skoda</option><option value="90173" id="cus90173">Smart</option><option value="90174" id="cus90174">Soueast</option><option value="90175" id="cus90175">Spectre</option><option value="90176" id="cus90176">Spyker</option><option value="90177" id="cus90177">SsangYong</option><option value="90178" id="cus90178">Subaru</option><option value="90179" id="cus90179">Suzuki</option><option value="90180" id="cus90180">Talbot</option><option value="90181" id="cus90181">TATA</option><option value="90182" id="cus90182">Tatra</option><option value="90183" id="cus90183">Tazzari</option><option value="90184" id="cus90184">Tesla</option><option value="90185" id="cus90185">Tianma</option><option value="90186" id="cus90186">Tianye</option><option value="90187" id="cus90187">Tofas</option><option value="90188" id="cus90188">Toyota</option><option value="90189" id="cus90189">Trabant</option><option value="90190" id="cus90190">Tramontana</option><option value="90191" id="cus90191">Triumph</option><option value="90192" id="cus90192">TVR</option><option value="90193" id="cus90193">Ultima</option><option value="90194" id="cus90194">Vauxhall</option><option value="90195" id="cus90195">Vector</option><option value="90196" id="cus90196">Venturi</option><option value="90197" id="cus90197">Volkswagen</option><option value="90198" id="cus90198">Volvo</option><option value="90199" id="cus90199">Vortex</option><option value="90200" id="cus90200">W Motors</option><option value="90201" id="cus90201">Wartburg</option><option value="90202" id="cus90202">Westfield</option><option value="90203" id="cus90203">Wiesmann</option><option value="90204" id="cus90204">Willys</option><option value="90205" id="cus90205">Xin Kai</option><option value="90206" id="cus90206">Zastava</option><option value="90207" id="cus90207">Zenos</option><option value="90208" id="cus90208">Zenvo</option><option value="90209" id="cus90209">Zotye</option><option value="90210" id="cus90210">ZX</option><option value="90211" id="cus90211">Avtokam</option><option value="90212" id="cus90212">Astro</option><option value="90213" id="cus90213">Bronto</option><option value="90214" id="cus90214">VAZ (Lada)</option><option value="90215" id="cus90215">QAZ</option><option value="90216" id="cus90216">YO-Mobil</option><option value="90217" id="cus90217">ZAZ</option><option value="90218" id="cus90218">ZİL</option><option value="90219" id="cus90219">ZİS</option><option value="90220" id="cus90220">İJ</option><option value="90221" id="cus90221">KaMaz</option><option value="90222" id="cus90222">Kanonir</option><option value="90223" id="cus90223">Kombat</option><option value="90224" id="cus90224">LuAZ</option><option value="90225" id="cus90225">Moskviç</option><option value="90226" id="cus90226">SeAZ</option><option value="90227" id="cus90227">SMZ</option><option value="90228" id="cus90228">TaqAZ</option><option value="90229" id="cus90229">UAZ</option><option value="90230" id="cus90230">Eksklyuziv</option></select></div><script>$("select.car_Marka").on("change", function() {var selected_option = $("select.car_Marka option:selected");$("input.catSelector9").attr("id", selected_option.attr("id")).attr("value", selected_option.attr("value"));});</script></div></div><div id="bdM5"><div id="car_model"><select id="car_model_id"><option value="0">Model: Seçin</option><option value="10001">378 GT Zagato</option><option value="10002">ACE</option><option value="10003">Aceca</option><option value="10004">Cobra</option><option value="10001">378 GT Zagato</option><option value="10002">ACE</option><option value="10003">Aceca</option><option value="10004">Cobra</option></select></div><input value="0" type="button" id="bdF1" name="title"><script>$("select#car_model_id").change(function () {var str = "";$("select#car_model_id option:selected").each(function() {str += $( this ).text() + " ";});$("input#bdF1").val( str );}).change();</script></div><div id="bdM65"><div class="manTdBut" id="bdM66"><input type="submit" style="display:none;" id="doSmbBt"><input type="button" class="manFlSbm" id="bdF77" style="font-weight:bold;" value="Добавить" onclick="document.getElementById('doSmbBt').click();"><input class="manFlRst" type="reset" id="bdF23" value="Очистить" onclick=""></div></div><input type="hidden" name="a" value="12"><input type="hidden" name="ssid" value="Yats5PDJ"><input type="hidden" id="numi" value="1"></div>

работает отлично. но функционально работы группы SELECT на сайт должен загружаться вот так

<div id="ad-car-detail-content">
</div>

<script type="text/javascript" charset="utf-8" src="http://avtousta.ucoz.com/js/board/add-cars-board.js"></script>

в таком случай не хочет работать функции JQUEY ONCHANGE.VAL

Помогите пожалуйста! В чем проблема что ему не дает работать? на сайте используется jquery 7.1.2

8
  • несколько сумбурно , не могли бы вы тезисно описать цели , задачи и выложить в том виде что у Вас на jsfiddle.net .
    – Redr01d
    29 дек 2015 в 9:16
  • @redroid чтоб шаг за шагом объяснить. а то кто знает что происходить 29 дек 2015 в 10:44
  • @redroid вы лучший бы помогли меня 29 дек 2015 в 10:46
  • Если я верно понял из того, что вы описали. То проблема в том, что вы вешаете обработчик на select до того, как он появился на странице. Поэтому событие change не срабатывает. Повешайте обработчик после того, как добавите select в DOM. Или делегируйте событие на документ. 29 дек 2015 в 11:23
  • @PavelGorobtsov вот именно так, не работает обработчик на select до того, как он появился на странице а эту то что вы написали я не понял Повешайте обработчик после того, как добавите select в DOM. Или делегируйте событие на документ 29 дек 2015 в 11:30

1 ответ 1

1

У вас плохое описание вопроса, поэтому трудно вам помочь.

Предположительно есть 2 проблемы:

  1. Обработчик на событие change добавляется раньше, чем элемент появляется в DOM. Возможные решение:

    • Делегирование события
    • Добавить обработчик после того, как элемент появится на странице
  2. Вторая проблема: событие change на селекте не срабатываем, если в нем всего один элемент (и это верно, т.к. изменения значения не происходит). Возможные решение:

    • Добавить еще один option (например "Выберите пункт"), если изменения необходимо произвести только после взаимодействия с контролом.
    • Вызвать событие в ручном режиме

Вот пример в jsfiddle

index.html

<div id="ad-car-detail-content"></div>
<input type="text" id="result">

js

$(document).ready(init);

function init () {
    // Делегируем событие
  $(document).on('change', 'select#car_model_id', onInputChanged);

    // Добавляем селект
    var select = '<select id="car_model_id" value="-1"><option value="0">A7</option></select>'
    $('#ad-car-detail-content').html(select);

  // Т.к. options всего один - то change не произойдет (value не меняется)
  // Тригерим руками
  $('select#car_model_id').trigger('change')
}

function onInputChanged(e) {
    console.log('change', e);

  $('#result').val(e.target.value);
}
2
  • Спасибо за ответь. но такой код мне не помогает. Если не понятно! токгда по подробнее. вот есть такой код на сайте <div id="ad-car-detail-content"> </div> сюда загружаются с помощью этого скрипта <script type="text/javascript" charset="utf-8" src="http://avtousta.ucoz.com/js/board/add-cars-board.js"></script> вес селекты оптионс и скрипты для функции изменения value input и id как видно загруженный контент через сайт не работает. а если создам на компьютере тест html и сохраню скрипт функции и select options без вызова загрузки через скрипт тогда работает 29 дек 2015 в 13:09
  • Не уверен, что комментарий к обработанной тревоге обработался правильно, поэтому продублирую здесь. Удаление вопросов уместно только для совершенно неспасаемых – вроде спама. В данном случае стоит использовать тревогу «закрыть» — «необходимо уточнить подробности вопроса»
    – Nick Volynkin
    30 дек 2015 в 7:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.