All geek questions in one place

How to set a parameter: selected in several options

After some struggle, I got the following code for my problem. However, it still does not add the highlighted selected option. You can find my original question below. The code has been improved, but it still does not work.

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

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

This is my original question.

I have the following HTML and jQuery. HTML is the result of CMS.

I used drag and drop from http://threedubmedia.com/demo/drop/ because they are full 6k. The core of jQuery UI itself is larger than 100k.

I want to delete one image per month. there are over 20 images and of course there are twelve months. For this, I used drag and drop.

I used only four images and four months for my demo purpose.

, . , , .

, , .

, , , 100% .

: FeatureValue , januar - FeatureValue1

1: 1,2,3.. / var monthindex

2: var FeatureValue var featurenumber

3: tis FeatureValue ( ) ,

4: var = dropimg

5: add: , 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 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");
            });
+3
2

:

...

.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') });

});
+2

, , . '$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'

0

Source: https://habr.com/ru/post/1710938/

More articles:


All Articles