Wie kann ich mit JavaScript eindeutige IDs erstellen?

Question 1

Ich habe ein Formular, in dem ein Benutzer mehrere Auswahlfelder für mehrere Städte hinzufügen kann. Das Problem ist, dass jedes neu generierte Auswahlfeld eine eindeutige ID haben muss. Kann dies getan werden, ist JavaScript?

Hier ist der Teil des Formulars zur Auswahl von Städten. Beachten Sie auch, dass ich etwas PHP verwende, um die Städte auszufüllen, wenn ein bestimmter Staat ausgewählt ist.

<form id="form" name="form" method="post" action="citySelect.php">
<select id="state" name="state" onchange="getCity()">
    <option></option>
    <option value="1">cali</option>
    <option value="2">arizona</option>
    <option value="3">texas</option>
</select>
<select id="city" name="city" style="width:100px">
    
</select>

    <br/>
</form>

Hier ist das JavaScript:

$("#bt").click(function() {

$("#form").append(
       "<select id='state' name="state" onchange="getCity()">
           <option></option>
           <option value="1">cali</option>
           <option value="2">arizona</option>
           <option value="3">texas</option>
        </select>
        <select id='city' name="city" style="width:100px"></select><br/>"
     );
});

Question 2

var id = "id" + Math.random().toString(16).slice(2)

Question 3

eine andere Möglichkeit, den Millisekunden-Timer zu verwenden:

var uniq = 'id' + (new Date()).getTime();

Question 4

const uid = function(){
    return Date.now().toString(36) + Math.random().toString(36).substr(2);
}

Diese Funktion generiert sehr eindeutige IDs, die nach ihrem generierten Datum sortiert sind. Auch verwendbar für IDs in Datenbanken.

Question 5

könnten Sie nicht einfach einen laufenden Index führen?

var _selectIndex = 0;

...code...
var newSelectBox = document.createElement("select");
newSelectBox.setAttribute("id","select-"+_selectIndex++);

BEARBEITEN

Nach weiterer Überlegung ziehen Sie es vielleicht vor, Namen im Array-Stil für Ihre Auswahlen zu verwenden …

z.B

<select name="city[]"><option ..../></select>
<select name="city[]"><option ..../></select>
<select name="city[]"><option ..../></select>

dann auf der Serverseite in PHP zum Beispiel:

$cities = $_POST['city']; //array of option values from selects

BEARBEITEN 2 Als Antwort auf den OP-Kommentar

Das dynamische Erstellen von Optionen mit DOM-Methoden kann wie folgt erfolgen:

var newSelectBox = document.createElement("select");
newSelectBox.setAttribute("id","select-"+_selectIndex++);

var city = null,city_opt=null;
for (var i=0, len=cities.length; i< len; i++) {
    city = cities[i];
    var city_opt = document.createElement("option");
    city_opt.setAttribute("value",city);
    city_opt.appendChild(document.createTextNode(city));
    newSelectBox.appendChild(city_opt);
}
document.getElementById("example_element").appendChild(newSelectBox);

davon ausgegangen, dass die cities Array existiert bereits

Alternativ könnten Sie die innerHTML-Methode verwenden…..

var newSelectBox = document.createElement("select");
newSelectBox.setAttribute("id","select-"+_selectIndex++);
document.getElementById("example_element").appendChild(newSelectBox);

var city = null,htmlStr="";
for (var i=0, len=cities.length; i< len; i++) {
    city = cities[i];
    htmlStr += "<option value="" + city + "">" + city + "</option>";
}
newSelectBox.innerHTML = htmlStr;

Question 6

function uniqueid(){
    // always start with a letter (for DOM friendlyness)
    var idstr=String.fromCharCode(Math.floor((Math.random()*25)+65));
    do {                
        // between numbers and characters (48 is 0 and 90 is Z (42-48 = 90)
        var ascicode=Math.floor((Math.random()*42)+48);
        if (ascicode<58 || ascicode>64){
            // exclude all chars between : (58) and @ (64)
            idstr+=String.fromCharCode(ascicode);    
        }                
    } while (idstr.length<32);

    return (idstr);
}

Question 7

Keine externen Bibliotheken erforderlich. Einzigartigkeit bewiesen.

Sie könnten so etwas tun.

// Function to generate unique id

const uniqueId = (length=16) => {
  return parseInt(Math.ceil(Math.random() * Date.now()).toPrecision(length).toString().replace(".", ""))
}

// ----------------------------

document.querySelector("#butt01").onclick = () => {
  document.querySelector("#span01").innerHTML = uniqueId()
}

ids = []
count = 0
document.querySelector("#butt02").onclick = () => {
  for (let i = 0; i< 1000; i++){
    ids.push(uniqueId())
  }
  for (el of ids){
    for (ell of ids){
      if(el == ell && ids.indexOf(el) != ids.indexOf(ell)){
        count += 1
      }
    }
  }
  document.querySelector("#span02").innerHTML = `Found ${count} duplicated random values.`
}

<button id="butt01">Generate</button>
<br>
<span id="span01"></span>
<br>
<hr>
<br>
<button id="butt02">Check collision potentiality in 1000 cases</button>
<br>
<span id="span02"></span>

Multiplizieren Sie die Zeit in Millisekunden seit der Epoche mit einem zufälligen Wert auf eine feste Größe.

Führen Sie dies aus, um mögliche Kollisionen zu sehen.

Sie würden sehen, dass es keine Kollisionen gibt, egal ob es 1000, 10000 oder 1000000000 ist.

Es hätte eine sehr geringe Chance, wenn zwei Benutzer gleichzeitig IDs generieren und die gleiche Zufallszahl erhalten.

Um die Eindeutigkeit zu erhöhen, könnten Sie das Datum weiter multiplizieren Math.random()s.

Question 8

Eine sehr kurze Funktion gibt Ihnen eine eindeutige ID:

var uid = (function(){var id=0;return function(){if(arguments[0]===0)id=0;return id++;}})();

Warnung (uid());