Run-Funktion auf Standard-HTML-Select mit PHP und Javascript

Question

Ich versuche, auf HTML auswählen Standard-Funktion zu starten, aber für Standardfunktionen nicht funktioniert für Standard gewählten Wert, aber es funktioniert auf Benutzer auswählen

<?php 
    $status_selected = 'A002'; 
?> 
<!-- HTML Select 1 --> 
<select id="state" class="l" name="state" onchange="Func()"> 
<option value="A001" <?php if($status_selected == "A001") echo "selected"; ?> data_item=" , StateA003 One, A003 State Two, A003 State Three">A001</option> 
<option value="A002" <?php if($status_selected == "A002") echo "selected"; ?> data_item=" , A003 State One, A003 State Two, A003 State Three">A002</option> 
<option value="A003" <?php if($status_selected == "A003") echo "selected"; ?> data_item=" , A003 State One, A003 State Two, A003 State Three">A003</option> 
</select> 
<!-- HTML Select 2 --> 
<label for="city">Item : </label><select id="city" name="item" class="l" onchange="onSelected()"> 

<script> 
    function Func() { 
     var city = document.getElementById('item'); 
     var state = document.getElementById('state'); 
     var val=state.options[state.selectedIndex].getAttribute('data_item'); 
     var arr=val.split(','); 
     item.options.length = 0; 
     for(i = 0; i < arr.length; i++) { 
      if(arr[i] != "") { 
       item.options[item.options.length] = new Option(arr[i],arr[i]); 
      } 
     } 
    } 

    function onSelected() { 
     var item = document.getElementById('item').value; 
     var state = document.getElementById('state').value; 
     console.log('Parent : ' + state+ ', Item : ' + item); 
    } 
</script> 

es HTML Select One laden und dann Punkt in HTML Select Two, aber HTML Select Two funktioniert nur von Manual User Select Und Nicht Works für Standard-Programatically Wert

Die ganze oben genannten Codes sind auf PHP-Datei.

Wie kann ich es beheben?

Answer 1

Put Out Of PHP Tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 

Auf Script Tag Put:

$(function() { 
    $("#state").on("change", Func()); 
}); 

Nach:

item.options[item.options.length] = new Option(arr[i],arr[i]); 

den Code setzen:

$(item).prop("selectedIndex",i); 

Answer 2

Nicht sicher, ob es relevant ist, aber vielleicht möchten Sie eine chained select Box? Wenn nicht, bitte klären Sie Ihre Frage, es ist sehr schwer zu folgen.

---

EDIT: Also das eigentliche Problem ist die Auswahl der richtigen Option per Code. In diesem Fall ist dies ein Duplikat von How do I programmatically set the value of a select box element using javascript?.

In Ihrem onload script (oder kurz nach den Funktionen, wenn das Skript am Ende der Seite ist), auch Func() laufen, setzen Sie den Wert für #city:

Func(); 
var state = document.getElementById('state'), 
    city = document.getElementById('city'), 
    selectedCity = state.getAttribute('data-selected-city'); 
if(selectedCity) { 
    city.value = selectedCity; 
} 

Sie benötigen die ausgewählte Stadt zu speichern irgendwo, ist mein Vorschlag, es in die Auswahl hinzuzufügen:

<select id="state" data-selected-city="new-york"> 
<!--and so on---> 
</select> 

HINWEIS: ein Datenattribut in HTML5 should begin with data-, nicht ein Unterstrich zu setzen. So ist es data-item="", nicht data_item="". Dadurch erhalten Sie eine Warnung, wenn Sie HTML Validator ausführen.