Wie man die Werte unter Verwendung der Datenliste nimmt, aber Werte bereits ausgewählt werden

Question

Hier benutze ich Datenliste ich habe eine URL in dem ich areaId bin = 2 & areaName = Chennai, jetzt muss ich die Werte nehmen und ich machen wollen, wird dieser Wert ausgewählt, und wieder möchte ich die areaname ändern, so dass ich anstelle von Chennai bin zu ändern, geändert i Karur bedeutet schließlich, klicken ich bin Submit-Button bedeutet i die AreaID & areaname

$('.options').on('change', function() { 
 
    var city_id = $('#options option[value="' + $('#location12').val() + '"]').data('id'); 
 
\t \t $('#city_id').val(city_id); 
 
\t \t console.log(city_id); 
 
\t \t 
 
}); 
 

 

 
function myFunction(){ 
 
\t 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<form method="POST"> 
 
<input list="options" type="name" class="form-control options" style="border-radius:0px;height: 36px;" name="location12" id="location12" placeholder="City" rel='<?php echo $_GET['areaId']?>' value='<?php echo $_GET['areaName']?>'> 
 
\t <datalist id="options"> 
 
\t <option data-id="1" value="Bangalore"></option> 
 
\t <option data-id="2" value="Chennai"></option> 
 
\t <option data-id="3" value="Karur"></option> 
 
\t </datalist> 
 
<input type="hidden" name="city_id" id="city_id"> 
 
<input type="submit" value="submit"> 
 
</form>

nehmen wollen

Answer 1

Sie haben 3 Möglichkeiten dort, verwenden Sie entweder die Defau lt PHP-Wert, um den Texteingabewert zu setzen und den Wert city_id auf load/ready mit JS dynamisch einzustellen, das Gegenteil zu tun und die entsprechende Option des Datenzeichens durch Hinzufügen von selected="selected" in PHP einzustellen und die Texteingabe beim Laden zu aktualisieren oder sie schließlich beide zu setzen PHP.

Hier ist der einfachste Fall für PHP: Setzen Sie den Texteingabewert und aktualisieren Sie city_id. Für die zweite Lösung gibt es ein bisschen mehr Code, da Sie die Optionen testen müssen und selected="selected" manuell hinzufügen, wenn der gute. Ich würde persönlich die zweite bevorzugen, weil Ihr PHP-Wert tatsächlich gegen die Optionen verifiziert wird, so dass nichts ausgewählt wird, wenn der PHP-Wert falsch ist und keinem Optionswert entspricht.

$('.options').on('change', function() { 
 
    var city_id = $('#options option[value="' + $('#location12').val() + '"]').data('id'); 
 
\t \t $('#city_id').val(city_id); 
 
\t \t console.log(city_id); 
 
\t \t 
 
}); 
 

 
//setting one of the element value based on the other's default value: 
 
$(document).ready(function(){ 
 
    //use this to set text input based on default selected option 
 
    //$('#location12').val($('#options option:selected').val()); 
 
    //console.log('text input is now: ' + $('#location12').val()); 
 
    
 
    //or this for the other way round 
 
    $('#city_id').val($('#options option[value="' + $('#location12').val() + '"]').data('id')); 
 
    console.log('city_id is now: ' + $('#city_id').val()); 
 
}); 
 

 

 
function myFunction(){ 
 
\t 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<form method="POST"> 
 
<input list="options" type="name" class="form-control options" style="border-radius:0px;height: 36px;" name="location12" id="location12" placeholder="City" rel="<?php echo $_GET['areaId']?>" value="Karur"> 
 
\t <datalist id="options"> 
 
\t <option data-id="1" value="Bangalore"></option> 
 
\t <option data-id="2" value="Chennai" selected="selected"></option> 
 
\t <option data-id="3" value="Karur"></option> 
 
\t </datalist> 
 
<input type="hidden" name="city_id" id="city_id"> 
 
<input type="submit" value="submit"> 
 
</form>