如果下拉选择javascript然后设置文本框的值

时间:2009-11-14 20:31:23

标签: javascript

我花了一些时间来寻找这个,但似乎无法解决这个问题。

我有一个运输下拉,我想拆分运输类型和选择的数量,并将它们分成两个单独的隐藏字段。 (我目前正在使用文本字段以便于测试)

例如 - 如果他们选择第一次下降隔夜交付 - 14.00 OnChange我想将shippingtype的值设置为“Overnight Delivery”,并将我的送货字段值设置为“14.00”

我已经有位置工作(如果用户选择了取件,则会出现一个新的下拉列表,您选择的任何内容也会设置我的shippinglocation字段的值)

这是我到目前为止所拥有的......

<html>
<head>

<script type="text/javascript">
function SetShipping (objDropDown)
{
    var objHidden = document.getElementById("shipping");
    objHidden.value = objDropDown.value; 
}


function setShippingtype (objDropDown)
{
    var objHidden = document.getElementById("shippingtype");
    objHidden.value = objDropDown.value; 
}


function setShippinglocation (objDropDown)
{
    var objHidden = document.getElementById("shippinglocation");
    objHidden.value = objDropDown.value; 
}

function showEntry(obj,optionValue)
{
 //hide all entry selections onchange
 document.getElementById("pickup").style.display="none";
 if(obj.value=="pickup")
 {
  document.getElementById(optionValue).style.display="inline"; 
 }  
}



</script>
</head>
<body>
<form id="myform">

    <br />
    shippingselectbox
    <br />
    <select onchange="showEntry(this,this.value);setShippingtype(this);" name="shippingselectbox">
      <option value="">Shipping Options</option>
      <option value="pickup">Pickup - no charge</option>
      <option value="UPS">UPS Standard Shipping - 3.00</option>
      <option value="Overnight">Overnight Delivery - 14.00</option>

  </select>
    <br />
    <br />
    pickup 
  <span id="pickup" style="display:none;">
<select name="pickup" onchange="setShippinglocation(this)">
      <option>Please Choose a Location</option>
      <option value="Billings">Billings, MT</option>
      <option value="Livingston">Livingston, MT</option>
      <option value="Miles City">Miles City, MT</option>
      <option value="Cody">Cody, WY</option>
      <option value="Sheridan">Sheridan, WY</option>
  </select>
  </span>


    <br />
    <br />
<br />
 shipping (set hidden form tag - shipping amount for paypal)<br />
    <input name="shipping" type="text" value=""/>

    <br />
    <br />
<br />
 shippingtype (set hidden form tag - variable for paypal to send to Chris)<br />
    <input name="shippingtype" type="text" value=""/>
  <br />
  <br />

  <br />

 shippinglocation  (set hidden form tag -  variable for paypal to send to Chris)<br />
  <input name="shippinglocation" id="shippinglocation" type="text" value=""/>

</form>
</body>
</html>

2 个答案:

答案 0 :(得分:1)

我冒昧地将您的方法名称从SetShipping更改为setShipping以保持您的命名约定不变。坦率地说,我不能为重新格式化而烦恼,但是经过测试,玩得很开心。

<html>
<head>

<script type="text/javascript">
function setShipping (objDropDown)
{
    var objHidden = document.getElementById("shipping");
    var type = objDropDown.options[objDropDown.selectedIndex].text.substring(objDropDown.options[objDropDown.selectedIndex].text.indexOf('-')+2, objDropDown.options[objDropDown.selectedIndex].text.length);
    objHidden.value = type; 
}


function setShippingtype (objDropDown)
{
    var objHidden = document.getElementById("shippingtype");
    var type = objDropDown.options[objDropDown.selectedIndex].text.substring(0, objDropDown.options[objDropDown.selectedIndex].text.indexOf('-')-1);
    objHidden.value = type; 
}


function setShippinglocation (objDropDown)
{
    var objHidden = document.getElementById("shippinglocation");
    objHidden.value = objDropDown.value;
}

function showEntry(obj,optionValue)
{
    //hide all entry selections onchange
    document.getElementById("pickup").style.display="none";
    if(obj.value=="pickup")
    {
        document.getElementById(optionValue).style.display="inline"; 
    }  
}
</script>
</head>
<body>
<form id="myform">

<br />
shippingselectbox
<br />
<select onchange="showEntry(this,this.value);setShippingtype(this);setShipping(this);" name="shippingselectbox">
  <option value="">Shipping Options</option>
  <option value="pickup">Pickup - no charge</option>
  <option value="UPS">UPS Standard Shipping - 3.00</option>
  <option value="Overnight">Overnight Delivery - 14.00</option>
</select>
<br />
<br />
pickup 
<span id="pickup" style="display:none;">
<select name="pickup" onchange="setShippinglocation(this)">
  <option>Please Choose a Location</option>
  <option value="Billings">Billings, MT</option>
  <option value="Livingston">Livingston, MT</option>
  <option value="Miles City">Miles City, MT</option>
  <option value="Cody">Cody, WY</option>
  <option value="Sheridan">Sheridan, WY</option>
</select>
</span>
<br />
<br />
<br />
shipping (set hidden form tag - shipping amount for paypal)<br />
<input name="shipping" id="shipping" type="text" value=""/>
<br />
<br />
<br />
shippingtype (set hidden form tag - variable for paypal to send to Chris)<br />
<input name="shippingtype" id="shippingtype" type="text" value=""/>
<br />
<br />
<br />
shippinglocation  (set hidden form tag -  variable for paypal to send to Chris)<br />
<input name="shippinglocation" id="shippinglocation" type="text" value=""/>
</form>
</body>
</html>

答案 1 :(得分:0)

请格式化您发布的代码,这是可能的。就像你说赶上onChange事件一样。我会以某种方式序列化下拉元素的值。破折号或下划线等,然后对值执行split()并将相应的拆分存储在相应的隐藏输入值字段中。

例如,为了简洁起见使用原型:

function changeHandler(evt) {
    var selected = evt.target[evt.target.selectedIndex];
    var values = selected.value.split("-");
    $('hidden1').value = values[0];
    $('hidden2').value = values[1];
}