如何从选择输入字段接收和显示和发送值到数据库

Posted 2023-02-16

【中文标题】如何从选择输入字段接收和显示和发送值到数据库

【英文标题】：How to receive and display and send values from Select input field to database

【发布时间】：2021-12-02 11:32:15

【问题描述】：

这是我使用 select 的下拉列表示例

<label class="form__label" for="country"> Country Of Residence</label>
<select id="country" class="form__input" name="country"/>
    <option value="null">Select Country</option>
    <option value="United Arab Emirates">United Arab Emirates</option>
    <option value="Bahrain">Bahrain</option>
    <option value="Kuwait">Kuwait</option>
    <option value="Oman">Oman</option>
</select>

该值作为“字符串”存储在数据库中。

如果能帮助我理解两件事的最佳前进方式，我将不胜感激

加载中

数据库中的字符串值应该是我的下拉菜单中显示的选项。如果由于某种原因数据库中的字符串值不匹配，则应显示“选择国家/地区”选项。

变化时

选择的值应该是作为字符串发送到数据库的值。此功能已经实现，但之前我使用的是 input 或 type=text .. 那么现在需要进行哪些类型的更改才能从选择字段发送此值。

我在网上研究过，但我研究得越多，我就越感到困惑。大多数答案似乎都是 jQuery 解决方案。我正在寻找有关 Vanilla javascript 的帮助。我需要弄清楚的是“我是否需要一个隐藏字段来存储值并从数据库发送和接收？” .. 我真的对我研究的信息感到困惑。

任何帮助将不胜感激。

【问题讨论】：

你有什么困惑？数据值获取时间问题还是存储时间问题？你在哪一步感到困惑？

当我 console.log 显示正确显示的值，但加载时默认不显示国家/地区。相反，它仅显示“选择国家/地区”选项

您可以尝试将任何一个选项值设置为默认选中。

没有默认值。每个用户都已经选择了一个存储在数据库中的国家。 Onload 该国家/地区需要显示为已选择

用户可以选择当时的国家你可以设置选择的att*。

【参考方案1】：

使用纯 JavaScript 获取事件的选择元素值，试试这个并获取值。

var select_element = document.getElementById('country');
    
select_element.onchange = function() 
    var elem = (typeof this.selectedIndex === "undefined" ? window.event.srcElement : this);
    var value = elem.value || elem.options[elem.selectedIndex].value;
    alert(value);
    // your another required code set!
​
    

【讨论】：

@kiray_ray ：感谢您的回答..它似乎可以满足您的要求，但我的要求要简单得多..让我再次解释一下...在这一行<select id="country" class="form__input" name="country value="India"/>我已将值添加为“印度”，加载时我从数据库中获取值，它工作正常..但下拉显示未将印度显示为所选选项..它仍然显示“选择国家”..我想要它展示印度..我认为<option value="India"> 应该有selected 属性，但我不知道该怎么做..

我已经使用了一些逻辑来解决..你能检查我下面的答案并让我知道它是否可以..我的意思是它正在工作，但我不知道它是否是正确的方法..

【参考方案2】：

经过几天的挣扎，我正在使用这个解决方案。如果这是矫枉过正并且有更简单的方法，请在 cmets 中分享。

所以我首先确定了select元素

const country = document.getElementById('country');

然后创建如下函数

const displayCountry = function() 
  //CREATE ARRAY OF ALL OPTIONS
  const optionsArray = Object.entries(country.children);
  console.log(optionsArray);
  // GET NAME OF COUNTRY FROM SELECT FIELD
  const nameOfCountry = country.getAttribute("value");
  console.log(nameOfCountry);
  // FIND OPTION WITH THE SAME COUNTRY NAME
  const option = optionsArray.find(
    (option) => option[1].value === nameOfCountry
  );
  // UPDATE OPTION FIELD BY SETTING ATTRIBUTE OF SELECTED
  option[1].setAttribute("selected", true);
  console.log(option[1]);
;

可简写如下

const displayCountryShortened = function() 
  Object.entries(country.children)
    .find((option) => option[1].value === country.getAttribute("value"))[1]
    .setAttribute("selected", true);
;