Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как заставить меняться стиль option одного селекта в зависимости от выбора option.. (https://javascript.ru/forum/misc/34527-kak-zastavit-menyatsya-stil-option-odnogo-selekta-v-zavisimosti-ot-vybora-option.html)

print_r 08.01.2013 22:23

Как заставить меняться стиль option одного селекта в зависимости от выбора option..
 
Как заставить меняться стиль option одного селекта в зависимости от выбора option другого селекта.
<form class="variants" action="/cart"><div>
<select name="dop_variant">
<option dv_id="54">Оригинальный</option>
<option dv_id="49">Китайский</option>
</select></div>
<select name="variant"   form="variants">
<option value="104" compare_price="222" price="111" class="option_var" v_dv_id="49">Красный</option>
<option value="105" compare_price="333" price="222" class="option_var" v_dv_id="54">Синий</option>
<option value="111" compare_price="666" price="555" class="option_var" v_dv_id="49">Зеленый</option>
</select>
<div class="clear"></div>
Акция! <strike>222</strike>
</br>
<span>111</span><i>руб</i>	
<div class="clear"></div>
<input type="submit" class="button" value="в корзину" data-result-text="добавлено"/>
</form>

<script>

 $(function() {

	// Выбор вариантов цены
	$('select[name=variant]').change(function() {
		price = $(this).find('option:selected').attr('price');
		compare_price = '';
		if(typeof $(this).find('option:selected').attr('compare_price') == 'string')
			compare_price = $(this).find('option:selected').attr('compare_price');
		$(this).find('option:selected').attr('compare_price');
		$(this).closest('form').find('span').html(price);
		$(this).closest('form').find('strike').html(compare_price);
		return false;
	});
    //Работа с option
    $('select[name=dop_variant]').change(function(){
        dv_id = $(this).find('option:selected').attr('dv_id');
        $(this).closest('form').find('.option_var').each(function(){
        if(this.attr('v_dv_id') != dv_id){
            this.style.display = "none";
        }});
        return false;
    });
 });
</script>

Надо, чтоб при выборе "Китайсий" "Синий" приобретал display:none; и наоборот.

Deff 08.01.2013 23:11

<script src="http://code.jquery.com/jquery-latest.js"></script>



<form class="variants" action="/cart">
<div>
<select name="dop_variant">
<option dv_id="54">Оригинальный</option>
<option dv_id="49" not="Синий,105">Китайский</option>
</select>
</div>

<select name="variant"   form="variants">
<option value="104" compare_price="222" price="111" class="option_var" v_dv_id="49">Красный</option>
<option value="105" compare_price="333" price="222" class="option_var" v_dv_id="54">Синий</option>
<option value="111" compare_price="666" price="555" class="option_var" v_dv_id="49">Зеленый</option>
</select>
<div class="clear"></div>
Акция! <strike>222</strike>
</br>
<span>111</span><i>руб</i>	
<div class="clear"></div>
<input type="submit" class="button" value="в корзину" data-result-text="добавлено"/>
</form>



<script>

 $(function() {

	// Выбор вариантов цены
	$('select[name=variant]').change(function() {
	//...................
	});


    //Работа с option
    $('select[name=dop_variant]').change(function(){
	var thsOpt = $(this).find('option:selected');
	var not=thsOpt.attr('not')
	$("select[name=variant]").find("option").removeAttr('disabled')
	if(not){  not=not.split(",")[1];
//alert(not)
	   var a=$("select[name=variant]").find("option[value='"+not+"']").attr('disabled',true);

	}
    });
 });
</script>


Часовой пояс GMT +3, время: 02:27.