كيفية جعل مربع التحرير والسرد HTML حفظ القيم التي يضاف إليها المستخدم في مربع النص؟

https://stackoverflow.com/questions/3940255

30-09-2019
|

سؤال

لقد صنعت combobox لصفحة ويب. يأخذ القيم من المستخدم إلى مربع النص ويضيف تلك إلى القائمة عند النقر المزدوج في مربع النص. أريد أن أجعل المستخدم يتم تخزينه بشكل دائم كخيار في القائمة. كيف يمكنني فعل ذلك. سؤال آخر هو كيف يمكنني حساب عدد الخيارات في القائمة بحيث أضيف عنصرًا بجوار ذلك. ها هو الكود الخاص بي.

<html>
<head>
<script language="javascript">
function AddListItem(form)
{

var TestVar = form.txtInput.value;
form.txtInput.value = "";
form.select.options[3]=new Option(TestVar, TestVar, true);

}
</script>
<head>

<body>
<form id='Form1'>
<input id='txtInput' type='text' maxlength = "5" size="5" ondblclick="AddListItem(this.form)"/>
<p>
<select id='select'>
<option>abc</option>
<option>cde</option>
<option>efg</option>
</select>
</form>
</body>
</html>

المحلول

لإضافتك بشكل دائم ، تحتاج إلى برنامج نصي من جانب الخادم.

لإضافتها مؤقتًا ، يمكنك استخدام JavaScript:

function addVal(newVal) {
  var sel = document.getElementById('select');
  var opt = document.createElement("OPTION");

  sel.addChildNode(opt);
  opt.innerHTML = newVal;
  opt.value = newVal; //(alternatively)
}

لحساب عدد الخيارات:

function countOpts() {
  var sel document.getElementById('select');
  return sel.options.length;
}

(فقط للاستخدام المفاهيمي ، لا يتم اختباره على أنه وظيفي)

نصائح أخرى

يمكنك إضافة <option> ديناميكيا مثل هذا:

function add(selectId, optText, optValue)
{
    var newOption = document.createElement("option") 
    newOption.text = optText;
    newOption.value = optValue;
    document.getElementById(selectId).options.add(newOption);
}

SelectID هو معرف <select>, optText هل يتم عرض النص في المنسدلة و optValue هي القيمة التي سيتم تجميعها للخادم.

للحصول على الكود الخاص بك ، اتصل به باسم

<input id='txtInput' type='text' maxlength = "5" size="5" ondblclick="add('select', this.value, this.value)"/>

كما ترى ، لا تحتاج حقًا إلى العثور على طول الخيارات ، لكنك يستطيع افعل ذلك عبر options.length:

document.getElementById(selectId).options.length;

هكذا قال،

قد ترغب في إضافة هذا إلى القائمة المنسدلة ، وكذلك للانتقال إلى الخادم ، لإضافة إلى بعض الجدول ، على سبيل المثال. قد تضطر إلى إجراء هذه المكالمة عبر Ajax ، عند إضافتها إلى القائمة المنسدلة
لا يمكن استخدام العنصر الجديد عند النقر المزدوج إلى مربع النص. على طمس قد يكون خيار. الأفضل هو زر "إضافة" بعد مربع النص.

يبدو أنك بحاجة إلى برنامج نصي من جانب الخادم بعد ذلك. عند إرسال النموذج ، يمكنك الحصول على حقل "تذكر" جميع خيارات القائمة المنسدلة:

HTML المبسط:

<form method='post' action=''>
  <input name='newDDoption' />
  <input type='hidden' name='ddStorage' value='<?PHP echo implode("|||",$ddOptions); ?>' />
  <button>GO</button>
</form>

PHP المبسط:

<?PHP
$ddOptions = explode("|||",$_POST['ddStorage']);
$ddOptions[] = $_POST['newDDoption'];

echo "<select>";
for($x=0;$x<count($ddOptions);$x++) {
  echo "<option>".$ddOptions[$x]."</option>";
}
echo "</select>";
?>

لشرح: PHP يحفظ ddoptions في النموذج -> يدخل المستخدم خيارًا جديدًا -> يتم إرسال النموذج -> يجد PHP القيم المخزنة -> PHP يدفع على القيمة الجديدة -> حلقات PHP وإنشاء القائمة المنسدلة الدائمة.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow