Question

我有这个HTML代码：

<form>
  <select name="city" id="city">
    <option class="orase" value="0">Choose City</option>
    <option class="orase" value="1">Berlin</option>
    <option class="orase" value="2">Prague</option>
    <option class="orase" value="3">London</option>
    <input type="submit" name="srch1" id="srch1" value="Display"/>
  </select>
</form>

我只想在城市是柏林并且值被提交（按下按钮）时显示某些内容。但是这个javascript代码无效。

var city = document.getElementsByClassName("city");
var button = document.getElementById("srch1");
button.attachEvent("onsubmit", getCity());
var getCity = function () {
if (city.innerHTML === "Berlin") {
  document.write("You are in Berlin");
  }
}

Answer 1

试试这个：

HTML：

<form>
  <select name="city" id="city">
    <option class="orase" value="0">Choose City</option>
    <option class="orase" value="1">Berlin</option>
    <option class="orase" value="2">Prague</option>
    <option class="orase" value="3">London</option>
  </select>
  <button type="button" name="srch1" id="srch1">Display</button>
</form>

和JS：

var city = document.getElementById("city");
var button = document.getElementById("srch1");
var getCity = function () {
  if (city.value === "1") {
    document.body.innerHTML += "You are in Berlin";
  }
};
button.addEventListener("click", getCity);

一些变化：

使用button而不是input来防止立即绊倒重新加载页面。同时将其从select拉出来。

city

getElementById()

getElementsByClassName() 返回一个HTMLCollection，它是一个类似于数组的对象具有给定类名的所有元素。
当您为变量分配函数时，它不会被提升，因此将函数移动到表达式上方，该表达式引用它。另外您可以删除var并声明函数：function getCity () {...}
选中value元素的select，innerHTML只包含 option元素的HTML。
document.write()隐含地打开一个新文档，以及所有文档旧的内容消失了。使用简单的innerHTML代替。
使用addEventListener()代替attachEvent()。后者仅适用于IE＆lt; 11。 addEventListener适用于IE9以及所有现代浏览器。注意click侦听器并修复第二个参数，只是一个函数名，而不是一个函数调用。

Answer 2

我建议您使用jQuery，这有效：

$("#city").change(function (e) {
    e.preventDefault;
    var city = $("#city option:selected").text();
    if ( city == "Berlin" ) {
       alert("You are in Berlin");
    }
});

Answer 3

演示：http://jsfiddle.net/8GMvE/

<select name="city" id="city">
    <option class="orase" value="0">Choose City</option>
    <option class="orase" value="1">Berlin</option>
    <option class="orase" value="2">Prague</option>
    <option class="orase" value="3">London</option>
  </select>

var a = document.getElementById("city");
a.onchange = function(e){
    var index = a.selectedIndex;
    alert("You are in " + a[index].innerHTML);
};

Answer 4

修改输入：

<input type="submit" onClick="displaySomething()" value="Display"/>

然后，在<script>

中

function displaySomething()
{
 if(document.getElementById("city").options[document.getElementById("city").selectedIndex].value==1)
{
//Berlin selected!
}
}

Answer 5

<form>
  <select name="city" id="city">
    <option class="orase" value="0">Choose City</option>
    <option class="orase" value="1">Berlin</option>
    <option class="orase" value="2">Prague</option>
    <option class="orase" value="3">London</option>
    <input type="button" name="srch1" id="srch1" value="Display" onclick="f1();" />
  </select>
</form>


function f1() 
{
    if ( document.getElementById("city").value == 1) // value 1 is for Berlin
    {
        alert("do something in this block");
    } 
}

Answer 6

JSFiddle Demo

<select name="city" id="city">
    <option class="orase" value="0">Choose City</option>
    <option class="orase" value="1">Berlin</option>
    <option class="orase" value="2">Prague</option>
    <option class="orase" value="3">London</option>
    <input type="submit" name="srch1" id="srch1" value="Display" onclick="eval()" />
</select>
<script>
    var city;

    function eval() {
        city = document.getElementById("city").value;
        alert(city);
        if (city == "1") {
            alert('you are in Berlin');
        }
    }
</script>

这里有几点要注意，我使用了document.getElementById（＆＃34; city＆＃34;），因为它是你点击提交时保持值的选择对象。我还添加了一个单击提交后执行的功能。你想确保在那段时间之后抓住城市的价值;而不是像你拥有它将抓住它在JS加载上的值（在那时应该是未定义的）。

Answer 7

我会使用简单易用的Jquery方式。让我们给你一个身份<form id='myForm'>，然后使用以下内容 jquery代码 -

$("#myForm").submit(function(e){
    selected = $("#city option:selected").text();
    if(selected == "Berlin"){
        alert("your city is Berlin");
    }
    e.preventDefault();
});

这样它只会在提交后触发if语句，而不会在select更改时触发。

怎么知道我在表单中有哪个值（如果这个值是想要的话显示一些东西）

7 个答案: