Как установить опцию: выбрано несколько вариантов выбора - PullRequest
Новая
       12

Как установить опцию: выбрано несколько вариантов выбора

3 голосов
/ 21 июня 2009

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

var $index = $('.drop').index(this)
// find drop index...
var $indexofmonth = $index + 1;
//alert($indexofmonth); // this works
var $indeximg = event.dragTarget.title;
var $indeximgnum = $indeximg.replace(/[a-zA-Z]/g,"");
//alert($indeximgnum); // this gives only number 1,2,3,4 etc. Use this in option:eq(2)
var $featurenumber = "Feature" + $indexofmonth;
//alert($featurenumber); //this works
var $eqnum = 'option:eq('+$indeximgnum + ')';
//alert($eqnum); //working

//and set up like this $('select[name=Feature1] option:eq(3)').attr('selected', 'selected' );
// find the drop select
$sel = $("select[name='"+ $featurenumber +"']");
//the above html() give an array
$('$sel $eqnum').attr('selected', 'selected' );
//alert ('$sel $eqnum'); //this does not work

+++++++++++++++++++++++++++++

Это мой оригинальный вопрос.

У меня есть следующий HTML и jQuery. HTML является выводом из CMS.

Я использовал перетаскивание с http://threedubmedia.com/demo/drop/, потому что они всего 6k. Само ядро ​​jQuery UI составляет более 100 тыс.

Я хочу сбросить одно изображение в месяц. Есть более 20 изображений и, конечно, двенадцать месяцев. Для этого я использовал перетаскивание.

Я использовал только четыре изображения и четыре месяца для своей демонстрационной цели.

Я разобрался, как перетащить часть. Но я застрял, как создать функцию, чтобы она выбрала правильное изображение из правильного месяца.

Например, если я опускаю изображение дельфина в январе, я хочу выбрать вариант выбора дельфина в январе.

Я думаю, что это то, что мне нужно сделать, но не уверен на 100%.

В целом: заголовок удаленной области должен быть равен FeatureValue для выбора, например, januar - FeatureValue1

шаг 1: найдите номер индекса 1,2,3 .. отброшенной области / месяца и назначьте его как var monthindex

шаг 2: затем добавьте var var в FeatureValue var featurenumber

шаг 3: если значение совпадает с FeatureValue (порядковый номер), выберите следующее:

шаг 4: найдите заголовок отброшенного изображения var = dropimg

шаг 5: добавление: выбрано для значения опции выбора, если dropimg = название отброшенного img, dropimg

Я ценю вашу помощь. Заранее спасибо.

HTML 

<div id="calendarimg">
<div id="status"></div>
<div id="calendartable">

<div id="jan" class="drop" Title="januar" >&nbsp;</div>
<div id="feb" class="drop" Title="febrar" >&nbsp;</div>
<div id="mar" class="drop" Title="mars" >&nbsp;</div>
<div id="apr" class="drop" Title="april">&nbsp;</div>
<div id="mai" class="drop" Title="mai">&nbsp;</div>
<div id="jun" class="drop" Title="juni">&nbsp;</div>
<div id="jul" class="drop" Title="juli">&nbsp;</div>
<div id="aug" class="drop" Title="august">&nbsp;</div>
<div id="sep" class="drop" Title="september">&nbsp;</div>
<div id="oct" class="drop" Title="october">&nbsp;</div>
<div id="nov" class="drop" Title="november">&nbsp;</div>
<div id="dec" class="drop" Title="december">&nbsp;</div>

</div>


<div id="nodrop">

<div class="drag" title="Angel" id="angel1"></div>
<div class="drag" title="Dolphin" id="dolphin2"></div>
<div class="drag" title="Fantail" id="fantail3"></div>
<div class="drag" title="Hawk" id="hawk4"></div>


</div>
<!-- End of printimgs --> 

</div>

<div id="featureright2">

<form method="post" action="http://www.mywebsite.com/shopaddtocart.asp">
<table cellspacing="1" cellpadding="2" border="0"><tr><td class="al">
<p class="al"><strong>januar</strong></p>
<select size="3" name="FeatureValue1">
    <option value="" selected="selected">velg</option>
    <option value="97">Angel</option>
    <option value="98">Dolphin</option>
    <option value="99">Fantail</option>
    <option value="89">Hawk</option>

</select>
<input type="hidden" name="Feature1" value="88">
<p class="al"><strong>februar</strong></p>
<select size="3" name="FeatureValue2">
    <option value="" selected="selected">velg</option>
    <option value="109">Angel</option>
    <option value="110">Dolphin</option>
    <option value="111">Fantail</option>
    <option value="101">Hawk</option>

</select>
<input type="hidden" name="Feature2" value="100">
<p class="al"><strong>mars</strong></p>
<select size="3" name="FeatureValue3">
    <option value="" selected="selected">velg</option>
    <option value="112">Angel</option>
    <option value="121">Dolphin</option>
    <option value="122">Fantail</option>
    <option value="123">Hawk</option>

</select>
<input type="hidden" name="Feature3" value="120">
<p class="al"><strong>april</strong></p>
<select size="3" name="FeatureValue4">
    <option value="" selected="selected">velg</option>
    <option value="124">Angel</option>
    <option value="133">Dolphin</option>
    <option value="134">Fantail</option>
    <option value="135">Hawk</option>

</select>
<input type="hidden" name="Feature4" value="132">


</td></tr><tr><td class="ac">

<input class="txtfield" type="text" size="2" maxlength="3" name="quantity" value="1" />
</td><td class="ac vm"><input class="imgbtn" src="images/vpnav_buy_norw.gif" type="image"></td></tr>
<input type="hidden" name="productid" value="81" />
</table></form>
</div>

JQuery 

$(".drag")
    .bind( "dragstart", function( event ){
            // ref the "dragged" element, make a copy
            var $drag = $( this ), $proxy = $drag.clone();
            // modify the "dragged" source element
            $drag.addClass("outline");
            // insert and return the "proxy" element                
            return $proxy.appendTo( document.body ).addClass("ghost");
            })
    .bind( "drag", function( event ){
            // update the "proxy" element position
            $( event.dragProxy ).css({
                    left: event.offsetX,
                    top: event.offsetY
                    });
            })
    .bind( "dragend", function( event ){
            // remove the "proxy" element
            $( event.dragProxy ).fadeOut( "normal", function(){
                    $( this ).remove();
                    });
            // if there is no drop AND the target was previously dropped
            if ( !event.dropTarget && $(this).parent().is(".drop") ){
                    // output details of the action
                    $('#status').empty().append('<div>Removed <b>'+ this.title +'</b> from <b>'+ this.parentNode.title +'</b></div>');
                    // put it in it's original div...
                    $('#nodrop').append( this );
                    }
            // restore to a normal state
            $( this ).removeClass("outline");      

            });
$(".drop")
    .bind( "dropstart", function( event ){
            // don't drop in itself
            if ( this == event.dragTarget.parentNode ) return false;
            // activate the "drop" target element
            $( this ).addClass("active");
            })
    .bind( "drop", function( event ){
            // if there was a drop, move some data...
            $( this ).append( event.dragTarget );
            // output details of the action...
            $('#status').empty().append('<div>Dropped <b>'+ event.dragTarget.title +'</b> into <b>'+ this.title +'</b></div>');             


            })
    .bind( "dropend", function( event ){
            // deactivate the "drop" target element
            $( this ).removeClass("active");
            });

Ответы [ 2 ]

2 голосов
/ 24 июня 2009

Это должно сделать это:

твоя капля ... 

.bind( "dropend", function( event ){
  // deactivate the "drop" target element
  $( this ).removeClass("active");

  // added here:
  $("select[name='FeatureValue" + ($.inArray(this, $('#calendartable').children() )+1) + " Multiple']").children('option').each(function(){ if ( $(this).html() === $(event.dragTarget).attr('title') ) $(this).attr('selected', 'selected') });

});
0 голосов
/ 14 сентября 2009

Ваша проблема, я думаю, сводится к вашему окончательному селектору. '$sel $eqNum' Не является допустимым селектором jQuery. JavaScript не выполняет замену переменных в строках. Кроме того, использование $ для всех ваших имен переменных становится очень запутанным. Я пытаюсь использовать $ только для переменных, которые являются объектами jQuery. Переписать ваши объявления переменных, чтобы отразить это. В нижней части блока кода вы фактически извлекаете объект jQuery для вашего выбора ($sel), вы можете использовать метод .find() для этого объекта, чтобы искать ваши варианты на основе eqnum . 

var index = $('.drop').index(this);
var indexofmonth = index + 1;

var indeximg = event.dragTarget.title;
var indeximgnum = indeximg.replace(/[a-zA-Z]/g,"");

var featurenumber = "Feature" + indexofmonth;
var eqnum = 'option:eq('+indeximgnum+')';

// find the drop select
var $sel = $("select[name="+featurenumber+"]");

// find the option using eqnum from before
$sel.find(eqnum).attr('selected', 'selected' );

// or do it all in one brush stroke:
$('select[name='+featurenumber+'] option:eq('+indeximgnum+')').attr('selected','selected');

Функция $ возвращает объект jQuery из строки селектора, которую вы передавали '$sel $eqNum'

...