jQuery изменить select

[x_files_1]

Здравствуйте. Ткните носом в ошибку( Создаю компонент для Joomla 3. Проблема вот в чем:
Есть два поля которые условно назовем "один" и "два" - всё это в админ панели.

Как только меняю значение в поле ОДИН в поле ДВА значения должны обнуляться а точнее переходить на первый элемент из выпадающего списка. Весь этот процесс работает, но есть непонятная проблема. Спустя одну итерацию код перестает работать. Что именно происходит пришлось даже записать на видео. Посмотрите - думаю будет понятно что к чему. Так же под видео подробное описание проблемы!

ВИДЕО: http://www.youtube.com/watch?v=ANJ85jBRv2Y

ниже код

function zchange() {
	alert("Произошло изменение на " + val);
}

function listupdate() {
	jQuery("#jform_audio_id_audiocategory").val(1).select();
	jQuery('select#jform_audio_id_audiocategory').val(1).change();
	jQuery("#jform_audio_id_audiocategory").trigger("liszt:updated"); 
	alert("Изменение выделения выполнено");
}

<!--СОСТОЯНИЕ [ОДИН]-->

<select style="display: none;" id="jform_state" name="jform[state]" class="inputbox chzn-done" size="1" onchange="listupdate()">
	<option value="1" selected="selected">=ON</option>
	<option value="0">=OFF</option>
</select>
<div style="width: 220px;" class="chzn-container chzn-container-single chzn-container-single-nosearch chzn-container-active" id="jform_state_chzn">
	<a tabindex="-1" href="javascript:void(0)" class="chzn-single chzn-single-with-drop">
		<span>=ON</span>
		<div>
			<b>
			</b>
		</div>
	</a>
	<div class="chzn-drop" style="display: block; width: 218px; top: 24px;">
		<div class="chzn-search">
			<input tabindex="-1" style="width: 183px;" autocomplete="off" type="text">
		</div>
		<ul class="chzn-results">
			<li id="jform_state_chzn_o_0" class="active-result result-selected" style="">=ON</li>
			<li id="jform_state_chzn_o_1" class="active-result" style="">=OFF</li>
		</ul>
	</div>
</div>

<!--АУДИО КАТЕГОРИИ [ДВА]-->

<select class="chzn-done" style="display: none;" id="jform_audio_id_audiocategory" name="jform[audio_id_audiocategory]" onchange="zchange()">
	<option value="1" selected="selected">Диктор</option>
	<option value="2">Джингл</option>
	<option value="3">Реклама</option>
</select>
<div style="width: 220px;" class="chzn-container chzn-container-single chzn-container-single-nosearch chzn-container-active" id="jform_audio_id_audiocategory_chzn">
	<a tabindex="-1" href="javascript:void(0)" class="chzn-single chzn-single-with-drop">
		<span>Диктор</span>
		<div>
			<b>
			</b>
		</div>
	</a>
	<div class="chzn-drop" style="display: block; width: 218px; top: 24px;">
		<div class="chzn-search">
			<input style="width: 183px;" autocomplete="off" type="text">
		</div>
		<ul class="chzn-results">
			<li id="jform_audio_id_audiocategory_chzn_o_0" class="active-result result-selected highlighted" style="">Диктор</li>
			<li id="jform_audio_id_audiocategory_chzn_o_1" class="active-result" style="">Джингл</li>
			<li id="jform_audio_id_audiocategory_chzn_o_2" class="active-result" style="">Реклама</li>
		</ul>
	</div>
</div>

[Vlasenko Fedor]

<select id="jform_state" name="jform[state]" class="inputbox chzn-done" size="1" onchange="listupdate()">
      <option value="1" selected="selected">=ON</option>
      <option value="0">=OFF</option>
    </select>
    <hr>
    <select class="chzn-done" id="jform_audio_id_audiocategory" name="jform[audio_id_audiocategory]">
      <option value="1" selected="selected">Диктор</option>
      <option value="2">Джингл</option>
      <option value="3">Реклама</option>
    </select>
    <script>
      listupdate = function () {
        document.getElementById('jform_audio_id_audiocategory').options[0].selected = true;
      }
    </script>

[x_files_1]

<select id="jform_state" name="jform[state]" class="inputbox chzn-done" size="1" onchange="listupdate()">
      <option value="1" selected="selected">=ON</option>
      <option value="0">=OFF</option>
    </select>
    <hr>
    <select class="chzn-done" id="jform_audio_id_audiocategory" name="jform[audio_id_audiocategory]">
      <option value="1" selected="selected">Диктор</option>
      <option value="2">Джингл</option>
      <option value="3">Реклама</option>
    </select>
    <script>
      listupdate = function () {
        document.getElementById('jform_audio_id_audiocategory').options[0].selected = true;
      }
    </script>

Простите, я возможно чтото не туда вставляю но даже с вашим фрагментом всё таже история что на видео.

Вот как выглядит на данный момент моя функция listupdate().

function listupdate() {
	var valz = document.getElementById("jform_audio_id_audiocategory").value;
	alert("до изменений = "+valz);

	//очищаем список
	jQuery("#jform_audio_id_audiocategory").empty();

	//добавляем пункты
	jQuery("#jform_audio_id_audiocategory").append( jQuery('<option value="1">1111</option>'));
	jQuery("#jform_audio_id_audiocategory").append( jQuery('<option value="2">2222</option>'));
	jQuery("#jform_audio_id_audiocategory").append( jQuery('<option value="3">3333</option>'));

	jQuery("#jform_audio_id_audiocategory").val(1);
	jQuery('select#jform_audio_id_audiocategory').val(1).change();
	jQuery("#jform_audio_id_audiocategory").trigger("liszt:updated"); 

	document.getElementById('jform_audio_id_audiocategory').options[0].selected = true;

	var val = document.getElementById("jform_audio_id_audiocategory").value;
	alert("после изменений = "+val);
}

По своей сути первое поле обнуляется - но именно после первой итерации себя неадекватно ведет onchange на втором поле которое обнуляем. Так как в дальнейшем onchange на этом втором поле тоже обязан реагировать на свои изменения.

[x_files_1]

КСТАТИ!!! Вот еще что. Вчера заметил то что если использовать стандартные SELECT то все работает замечательно - но в панели администратора Joomla3 при создании формы стандартному SELECT задается display: none и идет подмена на кастомный SELECT. Так вот именно под красивой обложкой SELECT начинает выдавать такую ошибку в то время как стандартный ведет себя адекватно. Убрать оформление с SELECT конечно можно но хотелось бы разобраться именно в этой ситуации! Возможно проблема и не в обложке - но думаю это наблюдение стоило рассказать.

[Vlasenko Fedor]

создании формы стандартному SELECT задается display: none

Нет такого или вы, что делаете не так.
Не совсем понятно зачем вы динамически добавляете пункты.
Как вариант создать несколько нижних подчиненных и показывать скрывать их от значения верхнего. И я надеюсь вы делаете кастомный (собственный) fields для вставки в xml

[x_files_1]

Если вам поможет - то нашли буквально только что корень зла))) Вся проблема в том что именно это украшательство которое накидывает joomla на select не отлавливает изменения в самом select. Возможно ли как то отключить chosen (это как раз то самая шкура на select)?

[x_files_1]

ПРОБЛЕМА РЕШЕНА! Саму загвоздку решить не получилось - было решено выключить chosen оформление в joomla. Закомментировал подключение chosen и всё заработало! Спасибо всем кто откликнулся!

[Hishchnik]

Тут я разбираю такую же проблему, кому данный вопрос интересен, прошу, так как я подгоню результат под JHtml::_('formbehavior.chosen', 'select');