Wie füge ich eine Option zu einer dynamischen Anzahl von Auswahlfeldern hinzu und leite den Browser genau dann um, wenn die hinzugefügte Option mit jquery/js ausgewählt wird?

Question

Dies ist der Code, den ich derzeit habe. Der URL-Validator ist nur da, weil dieses Ding auf ANY-Option umgeleitet wurde und der EINZIGE Zeitpunkt, zu dem eine Umleitung ausgelöst werden soll, ist, wenn auf die Optionen, die ich mit jQuery hinzufüge, geklickt wird.

Hier ist mein HTML:

<select data-select-size-key="0" id="popular_sizes_0" name="popular_sizes_0">!!OptiONS CONtAINED HERE!!</select> 

und meine JS:

var customSizeOption = "<option value='"+"https://url.com"+"'>Size Not Listed?</option>"; 
$("[id^=popular_sizes_]").append(customSizeOption); 

function validateURL(textval) { 
    var urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/; 
    return urlregex.test(textval); 
} 

$(function(){ 
    // bind change event to select 
    $("[id^=popular_sizes_]").on('change', function() { 
     var url = $(this).val(); // get selected value 
     if (validateURL(url)) { // require a URL 
      window.location = url; // redirect 
     } 
     return false; 
    }); 
}); 

Und here's CodePen for it.

HINWEIS: Die _0 auto-Schritte bis zu 12 Auswahlbox pro Seite

Answer 1

Ihr Code funktioniert gut, aber die select hat keine anderen option, so gibt es keine Änderung Ereignis, wenn Sie einen Standardwert (leer) hinzufügen option und führen Sie den Code aus, der es funktioniert.

<select data-select-size-key="0" id="popular_sizes_0" name="popular_sizes_0"> 
<option></option> 
</select> 

Jetzt, wenn Sie die Option ändern, funktioniert die Validierung und Umleitung.