无法使用jQuery从HTML表单获取下拉列表的当前值

时间:2015-03-03 08:05:32

标签: jquery html

遇到jQuery的元素选择问题,我似乎无法过去。

我试图通过带有特定消息的下拉菜单向用户提供选择夏威夷或阿拉斯加的用户。我遇到问题的唯一部分是从下拉列表中获取值。表单本身未提交,当用户单击页面上的“继续”按钮时,我尝试从此下拉列表中获取新选择的状态值。为了简单起见,我很乐意在控制台中显示值。

这是我的jQuery,我正在控制台中返回 undefined 。我可以使用返回值的值或标题。要么没问题。:

jQuery('#region_id option:selected').val();

这是我的完整HTML下拉菜单:

<select defaultvalue="" id="billing:region_id" name="billing[region_id]" title="State/Province" class="validate-select required-entry" style="">
    <option value="">Please select region, state or province</option>
    <option title="Alabama" value="1">Alabama</option>
    <option title="Alaska" value="2">Alaska</option>
    <option title="Arizona" value="4">Arizona</option>
    <option title="Arkansas" value="5">Arkansas</option>
    <option title="California" value="12">California</option>
    <option title="Colorado" value="13">Colorado</option>
    <option title="Connecticut" value="14">Connecticut</option>
    <option title="Delaware" value="15">Delaware</option>
    <option title="District of Columbia" value="16">District of Columbia</option>
    <option title="Florida" value="18">Florida</option>
    <option title="Georgia" value="19">Georgia</option>
    <option title="Hawaii" value="21">Hawaii</option>
    <option title="Idaho" value="22">Idaho</option>
    <option title="Illinois" value="23">Illinois</option>
    <option title="Indiana" value="24">Indiana</option>
    <option title="Iowa" value="25">Iowa</option>
    <option title="Kansas" value="26">Kansas</option>
    <option title="Kentucky" value="27">Kentucky</option>
    <option title="Louisiana" value="28">Louisiana</option>
    <option title="Maine" value="29">Maine</option>
    <option title="Maryland" value="31">Maryland</option>
    <option title="Massachusetts" value="32">Massachusetts</option>
    <option title="Michigan" value="33">Michigan</option>
    <option title="Minnesota" value="34">Minnesota</option>
    <option title="Mississippi" value="35">Mississippi</option>
    <option title="Missouri" value="36">Missouri</option>
    <option title="Montana" value="37">Montana</option>
    <option title="Nebraska" value="38">Nebraska</option>
    <option title="Nevada" value="39">Nevada</option>
    <option title="New Hampshire" value="40">New Hampshire</option>
    <option title="New Jersey" value="41">New Jersey</option>
    <option title="New Mexico" value="42">New Mexico</option>
    <option title="New York" value="43">New York</option>
    <option title="North Carolina" value="44">North Carolina</option>
    <option title="North Dakota" value="45">North Dakota</option>
    <option title="Ohio" value="47">Ohio</option>
    <option title="Oklahoma" value="48">Oklahoma</option>
    <option title="Oregon" value="49">Oregon</option>
    <option title="Pennsylvania" value="51">Pennsylvania</option>
    <option title="Rhode Island" value="53">Rhode Island</option>
    <option title="South Carolina" value="54">South Carolina</option>
    <option title="South Dakota" value="55">South Dakota</option>
    <option title="Tennessee" value="56">Tennessee</option>
    <option title="Texas" value="57">Texas</option>
    <option title="Utah" value="58">Utah</option>
    <option title="Vermont" value="59">Vermont</option>
    <option title="Virginia" value="61">Virginia</option>
    <option title="Washington" value="62">Washington</option>
    <option title="West Virginia" value="63">West Virginia</option>
    <option title="Wisconsin" value="64">Wisconsin</option>
    <option title="Wyoming" value="65">Wyoming</option></select>

有什么想法吗?

注意:该选择菜单以</select>结尾,但我无法显示。

2 个答案:

答案 0 :(得分:2)

将HTML更改为:

<select defaultvalue="" id="region_id" name="billing[region_id]" title="State/Province" class="validate-select required-entry" style="">

以便ID与您的选择器匹配,并且不使用特殊的:字符。此外,您不需要option:selectedjQuery("#region_id").val()将获得所选值。

如果由于某种原因无法更改HTML,则需要在jQuery中使用正确的ID:

jQuery("#billing\\:region_id").val();

您需要转义:以防止将其视为修饰符前缀。而你必须加倍反斜杠,以便jQuery可以直观地看到它。

答案 1 :(得分:1)

根据文档

  

使用任何元字符(例如!“#$%&amp;'()* +,。/:;&lt; =&gt;?@ [] ^`{|}〜)作为文字作为名称的一部分,必须使用两个反斜杠进行转义:\。例​​如,id =“foo.bar”的元素可以使用选择器$(“#foo \ .bar”)。

因此,您需要使用\\

转义元字符
jQuery('#billing\\:region_id').val();

或使用属性等于选择器:

jQuery('[id="billing:region_id"]').val();