abc: Elemente aus der Dropdownliste entfernen

Beitrag lesen

ok. Ich habe etwas gefunden. Zwar auf einer anderen Website aber es funktioniert mittlerweile weingistens.

Hier ist der Link dazu

Mithilfe dieses Javascripts habe ich dann das auf meine Seite verbastelt. Diese habe ich natürlich verändert und als beispielhaftes Logo das Intel genommen.

Hier ist der gesamte Quelltext - auch wenn alles in einer Datei ist und unsortiert ist - es funktioniert.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
       #one {font-family:Arial,sans-serif; font-size:20px; color:#5044FF;}
       #two {font-family:Arial,sans-serif; font-size:16px; color:black;}

       input[type="text"] {
       width: 200px;
       height: 20px;
       padding-right: 50px;
}
        input[type="password"]{
        width: 200px;
        height: 20px;
        padding-right: 50px;}

        input[type="button"] {
         margin-left: -25px;

         height: 20px;
         width: 20px;
}



.img {
  width: 20%;
  height: auto;
  margin-left: 75%
}
#fussbereich {
    position:absolute;
    bottom: 0;
    width: 100%;
    background-color: #5044FF;
    height: 2em;
}
    </style>
    <title>Titel</title>
</head>

<body>
<h2 id="one"> <center> Verwaltung </center> </h2>
<img class="img"  src="http://www.dafont.com/forum/attach/orig/4/3/437018.png?1" >


<style type="text/css">
.centered{
    background-color: #DDDDDD;
    border-radius: 10px 10px 10px 10px;
    height: 500px;
    left: 50%;
    margin-left: -175px;
    margin-top: -75px;
    padding: 25px;
    position: absolute;
    top: 20%;
    width: 800px;
    text-align:center;

    font-size: 15pt;
}

</style>

<script>
    var selectElement = document.getElementById('selectElement');

    for(var i=0;i<5;i++){
      var option = document.createElement('option');
      option.text = 'Text '+i;
      option.value = i;
      selectElement.options[i] = option;
    }
</script>
<div>
    <center>
        <form>
        <table>
            <tr>
                <th style="text-align:left" id="two">Zugelassene User:</th>
                <th><input type='text' name='user' id="user"></th>

            </tr>
            <tr>
                <td><div id="createButtons"></div></td>
                <td>

                    <ul style="font-family:Arial,sans-serif; font-size:16px; color:#5044FF;" id="list"></ul>
                    </td>

            </tr>


             <tr>
                 <td></td>
                    <td>
                        <!--<input type="button" onclick="javascript: document.getElementById('5').value='';" class="edit" >-->


                     </td>
                 <!--<td colspan="6">&nbsp;</td>-->
             </tr>



                <tr>
                    <th style="text-align:left" id="two">Name:</th>
                    <th><input type='text' name='name' id="name" ></th>

            </tr>
            <tr>
                <th style="text-align:left" id="two">Passwort:</th>
                <td><input class="password" type="password" id="pw" name="password"></td>
            </tr>


            <tr>
                <td colspan="6">&nbsp;</td>
            </tr>

            <tr>
                <th style="text-align:left" id="two">Irgendeine URL:</th>
                <th><input  type='text' name='url' id="url"></th>


        </table>
            </form>
    </center>

    <p>.</p>

<script>

(function(){
	var test = ["User Hinzufügen"];
	var buttonContainer = document.getElementById("createButtons");
	test.forEach(function(item){
		var button = document.createElement("button");
		button.innerHTML = item;
		button.addEventListener("click", function(){
		    var unloadCheck = false;
			addItem(item);
		}, false);
		buttonContainer.appendChild(button);
	});
	var list = document.getElementById("list");
	var unloadCheck = false;
	function addItem(item){
		var li = document.createElement("li");
		li.item = item;
		user = document.getElementById('user').value;
		li.appendChild(document.createTextNode(user));

		var deleteButton = document.createElement("button");
		deleteButton.innerHTML = "X";
		deleteButton.addEventListener("click", function(){
			list.removeChild(li);
		}, false);
		li.appendChild(deleteButton);

		var beforeLi = null;
		for (var i = 0, l = list.childNodes.length; i < l; i += 1){
			if (list.childNodes[i].item > item){
				beforeLi = list.childNodes[i];
				break;
			}
		}
		list.insertBefore(li, beforeLi);
	}
}());


    function varStorage(){
    user = document.getElementById('user').value;
    name = document.getElementById('name').value;
    hook = document.getElementById('url').value;
    shoppw = document.getElementById('pw').value;
    alert(user + " " + name + " " + pw + " " + url )
    }

    var unloadCheck = true;
window.onbeforeunload = function() {
    if (unloadCheck) {
        return "Sie verlieren ggf. Ihre letzten, nicht gespeicherten Eingaben!";
    } else {
        return;
    }
}

 function speichern() {
    var ask = window.confirm("Wollen sie wirklich speichern? Einträge werden überschrieben.");
    if (ask) {
        window.alert("Erfolgreich gespeichert");
        unloadCheck = false
        document.location.href = "http://google.de";

    }
}


</script>


    <center><input style="height: 40px; width: 100px;" type="submit" value="Abbrechen" onClick="parent.location='http://localhost'"/>
    <input style="height: 40px; width: 100px;" type="submit" value="Speichern" onClick="speichern()"/></center>
<center>
 <div id="fussbereich">
     <center><input style="height: 32px; width: 173px;" type="submit" value="Abmelden" onClick="parent.location='http://localhost'"/></center>
 </div>
    </center>
</body>
</html>