JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<p>
  Parse local or hosted XML and get data
</p>

CSS

li.menu_cntr_head.custom:before {
    content: "\f0d0";
    font-family: FontAwesome;
    margin-right: 5px;
}

.selection {
	position:relative;
}

.selection:after {
    position: absolute;
    top: 0px;
    right:5px;
    content: "\f0dc";
    font-family: FontAwesome;
    font-size:12px;
    line-height: 2;
    z-index: 100;
}

#db {
	margin-bottom:20px;
	max-width:200px;
	width:100%;
	padding:5px;
	border:1px solid #666666;
	border-radius:0;
	-webkit-appearance: none;
}

JavaScript

console.log("XML ready – source: /Library/WebServer/Documents")
$.ajax({
    url: "https://localhost/hosting.xml",
    type: "GET",
    dataType: "html",
    success: function(data) {
		var xml = $.parseXML(data)
    $("#_menu_entrys").append("<ul class='.menu_cntr_head'><li class='menu_cntr_head custom'>Kunde:</li><li><div class='selection'><select id='db'></select></div></li></ul>");
    $("#db").append("<option class='first' value='first' disabled>Bitte auswählen</option>");
    $(xml).find('login').each(function()
    {
    	//WICHTIG
    	selectid = $(this).find('url').text();
       selectname = $(this).find('name').text();
       pw = $(this).find('pw').text();
       $("#_menu_entrys #db").append("<option value='" + pw + "'>" + selectid + "</option>");
    }); //each function bahnhöfe
    
    //Bitte wählen vorselektiert
	$("#_menu_entrys option[value='first']").prop({defaultSelected: true});
	
	//Selectmenu sortieren
	function dosort() {
	var options = $('select#db option:not(.first)');
	    var arr = options.map(function(_, o) {
	        return {
	            t: $(o).text(),
	            v: o.value
	        };
	    }).get();
	    arr.sort(function(o1, o2) {
	        return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0;
	    });
	    options.each(function(i, o) {
	        console.log(i);
	        o.value = arr[i].v;
	        $(o).text(arr[i].t);
	    });
	}
	dosort();
	
	//GET SELECTION IN SELECT
	var selection;
	
	function getselection() {
	    if($("#db option").length > 0)
	    {
	    	selection = $("#db").val();
	      //console.log(selection);
	    }
	    else
	    {
	    	setTimeout(function(){
	    	getselection();
	       //console.log("no option in select, retry");
		}, 200);
	    }
	  }
	 
	  $("#db").on("change", function() {
	    option =  $(this).find('option:selected').text();
	    selection = $(this).val();
	    console.log(option);
	    console.log(selection);
	    $('input[name="_login[user]"]').val(option);
	   ...