HTML Drop-Down-Liste zur Auswahl Radio Button

Question

Ich habe ein Problem, dass ich hoffe, eine Richtung in der Lösung zu bekommen - ich baue eine eCommerce-Website, die eine Seite mit Produktoptionen enthält. Eine der Optionen ist die Auswahl der Farbe des Produkts durch Auswahl eines Farbfelds. Sobald das Farbfeld mit JQuery ausgewählt wurde, wird ein roter Rahmen am ausgewählten Farbfeld angezeigt. Zur gleichen Zeit wird die gleiche Farboption in einer HTML-Dropdown-Liste/Menü ausgewählt, die perfekt funktioniert. Das Problem tritt auf, wenn ich das Umgekehrte tun möchte: Wenn ein Benutzer die Option aus der Dropdown-Liste auswählt, muss das entsprechende Farbfeld einen Rahmen haben. Nicht meine Wahl, aber so will der Kunde es haben.

Ich habe überall gesucht, wo ich kann, aber keine der Lösungen, die ich gefunden habe, scheinen zu funktionieren. Irgendeine Anleitung zu diesem?

Die JQuery:

jQuery(document).ready(function($) { 
     $('.checkboxes input').each(function(index, value) 
     { 
      $(this).parent().prepend('<div class="color" color="' + $(this).attr('color') + '" style="background: url(\'../../../../images/textiles/' + $(this).attr('color') + '.jpg\')"> </div'); 
     }); 

     $('.color').click(function(e){ 
      //alert($(this).attr('color')); 
      $('.color').removeClass('selected'); 
      $(this).addClass('selected'); 
      $('input[color=' + $(this).attr('color') + ']').click(); 
     }); 
    }); 

Die HTML-Radio-Buttons und Drop-Down-Liste:

<div class="checkboxes"> 

<input type="radio" onclick="javascript:void 
goToOption(document.gobag.color_list,'Multicam')" color="multicam" name="color" 
value="Multicam" style="visibility: hidden"/> 

<input type="radio" onclick="javascript:void 
goToOption(document.gobag.color_list,'Marpat')" color="marpat" name="color" 
value="Marpat" style="visibility: hidden"/> 

<input type="radio" onclick="javascript:void goToOption(document.gobag.color_list,'UC')" 
color="UC" name="color" value="UC"style="visibility: hidden"/> 

<input type="radio" onclick="javascript:void 
goToOption(document.gobag.color_list,'Coyote')" color="coyote" name="color" 
value="Coyote" style="visibility: hidden"/> 

<input type="radio" onclick="javascript:void 
goToOption(document.gobag.color_list,'Khaki')" color="khaki" name="color" value="Khaki" 
style="visibility: hidden"/> 

<input type="radio" onclick="javascript:void 
goToOption(document.gobag.color_list,'Foliage')" color="foliage" name="color" 
value="Foliage" style="visibility: hidden"/> 

<input type="radio" onclick="javascript:void 
goToOption(document.gobag.color_list,'Black')" color="black" name="color" value="Black" 
style="visibility: hidden" /> 

</div></span><br /> 

    <select name="color_list" onchange=""> 
    <option selected="selected">Select a Color</option> 
    <option name="Black" >Black</option> 
    <option name="Foliage" >Foliage</option> 
    <option name="Khaki" >Khaki</option> 
    <option name="Coyote" >Coyote</option> 
    <option name="UC" >UC</option> 
    <option name="Marpat" >Marpat</option> 
    <option name="Multicam" >Multicam</option> 
    </select><br /><br /> 

Answer 1

Try this:

$('select[name="color_list"]').change(function() { 
    $('input[color=' + $(this).val() + ']').prop('checked',true); 
}); 

Diese .prop() wird mit dem Radio-Button zu setzen, wie überprüft und .val(), um den Wert von dem ausgewähltenzu erhalten

oder mit prop('name') statt val() auf dem option

$('input[color=' + $(this).prop('name') + ']').prop('checked',true);

oder bei Verwendung von jQuery < 1.6 - Sie nicht prop nutzen können, müssen Sie .attr()

$('input[color=' + $(this).val() + ']').attr('checked','checked');

Working example here verwenden

an Ihrem Standort suchen - das Problem ist klar:

$('select[name="color_list"]').change(function() { 
    $('.color').removeClass('selected');           
    $('div[color=' + $(this).attr('color') + ']').addClass('selected'); 
    $('input[color=' + $(this).attr('color') + ']').prop('checked',true); 
}); 

dies trägt zum korrekten die Klasse nur:

$('select[name="color_list"]').change(function() { 
    $('.color').removeClass('selected');           
    $('.color').addClass('selected'); 
    $('input[color=' + $(this).attr('color') + ']').prop('checked',true); 
}); 

Sie die selected Klasse zu jedem Muster hinzufügen, es auf diese Änderung Farbfeld. (Beachten Sie, dass Sie den Wert aus der Option möglicherweise klein schreiben müssen)

Answer 2

Ich gehe davon aus, dass Sie das Dropdown-Ereignis (auswählen) ändern möchten. Versengen Sie bereits jQuery verwenden, können Sie so etwas wie dies in Ihre Seiten document.ready() Methode setzen dieses Ereignis zu erfassen:

$('#colorDropDown').change(function() { 
    // Add the red border to your swatch. 
}); 

Hoffnung, das hilft.

Answer 3

Ich habe ein paar Fragen für Sie, damit wir diese nach unten genagelt erhalten:

-Danke für den Code!

Wie für die Richtung im Allgemeinen, denke ich, dass Sie anfügen müssen, welche Javascript-Maschinerie Sie haben, um den Rahmen auf dem entsprechenden Farbfeld, auf dem "onchange" -Attribut Ihres Dropdowns zu platzieren.Der Code könnte wie folgt aussehen:

HTML

<select name=yourdropdown onchange='selectSwatch(this.form.yourdropdown);'> 

Javascript

function selectSwatch(dropdown){ 
    // code to change the swatch...like some of these other guys' answers! 
    // They have a lot more experience than I do! 
} 

Mit freundlichen Grüßen,

sf