基于选择选项

Question

我有一个小的javascript问题（我真的不知道javascript，我刚开始学习一点）。

所以它是这样的：

• 我有一个表单应该根据html选择标记内的选定选项加载一组特定字段，因此它应该在select中有三个选项。
  • 选择选项
  • 报价
  • 电子邮件

我认识的人告诉我使用开关/外壳做一些事情，但老实说我不知道​​从哪里开始。 我已经尝试用css中的那些隐藏/阻止东西做一些事情，以便根据所选的选项隐藏/显示特定的表格div，但它不适合我给我以下问题：

• 当我使用表单提交按钮时，整个表单消失，所以不应该发生

• 第二件事我在两个div中都有一个名为-url-的同名文本字段，因为输入被隐藏但仍然存在于页面上 如果我在-offer-部分写了一个url，它会将其设置为空白，因为表单电子邮件部分中的-url-字段（当前隐藏在提供部分下面）是空白的。

我希望很清楚，如果您有任何疑问请咨询我！ 这是代码：

<script type="text/javascript" >
     
$(document).ready(function(){
        $("select").change(function(){
            $( "select option:selected").each(function(){
                if($(this).attr("value")=="offer"){
                    $(".choose").hide();
                    $(".offer").show();
                    alert(attr("value"));
                }
                if($(this).attr("value")=="email"){
                    $(".choose").hide();
                    $(".email").show();
                }
                if($(this).attr("value")=="choose"){
                    $(".choose").hide();
                    $(".choose1").show();
                }
            });
        }).change();
    });
    
</script>

<style>
 .choose{
        padding: 0px;
        display: none;
        margin-top: 0px;
        /*border: 1px solid #000; */
    }
    .offer{  }
    .email{  }
    
    .choose1{background: #ffffff;}

</style>

 <form action="#" method="post" id="add" enctype="multipart/form-data" class="form-signin">
     <input type="hidden" name="id" value="{- $item.id -}" />
     <input type="hidden" name="save" value="1" />
     <input type="hidden" name="store" value="1" />
        <select name="is_type">
            <option value="choose">Choose option</option>
            <option value="offer">Offer</option>
            <option value="email">E-mail</option>
        </select>
    </div>
    <div class="choose choose1">choose your option</div>
    <div class="choose offer">
        <!-- offer option start -->  
              
 
    <div class="form-group row">
      <label for="url" class="col-sm-4 control-label">{- "Url"|translate -} :</label>
      <div class="col-sm-8">
        <input type="text" class="form-control" id="url" name="url" value="{- $item.url|escape -}" size="50" />
        {-if $error.url-}<div class="alert alert-danger">{-"The url is mandatory"|translate-}</div>{-/if-}
      </div>
    </div>
    <div class="form-group row">
      <label for="name" class="col-sm-4 control-label">{- "Name"|translate -} :</label>
      <div class="col-sm-8">
        <input type="text" class="form-control" id="name" name="name" value="{- $item.name|escape -}" size="50" />
        {-if $error.name-}<div class="alert alert-danger">{-"The name is mandatory"|translate-}</div>{-/if-}
      </div>
    </div>
    <div class="form-group row">
      <label for="list" class="col-sm-4 control-label">{- "E-mail list:"|translate -} :</label>
      <div class="col-sm-8">
          <textarea name="list" rows="10" style="width:100%">{- $item.data|escape -}</textarea>
        {-if $error.list-}<div class="alert alert-danger">{-"Insert at least one e-mail address"|translate-}</div>{-/if-}
      </div>
    </div>


        
        <!-- offer option end -->
    
    </div>
    <div class="choose email">
    <!-- email option start -->
      
      
    <div class="form-group row">
      <label for="email" class="col-sm-4 control-label">{- "E-mail"|translate -} :</label>
      <div class="col-sm-8">
        <input type="text" class="form-control" id="url" name="email" value="{- $item.url|escape -}" size="50" />
        {-if $error.url-}<div class="alert alert-danger">{-"The E-mail is mandatory"|translate-}</div>{-/if-}
      </div>
    </div>   
    <div class="form-group row">
      <label for="url" class="col-sm-4 control-label">{- "Url"|translate -} :</label>
      <div class="col-sm-8">
        <input type="text" class="form-control" id="url" name="url1" value="{- $item.url|escape -}" size="50" />
        {-if $error.url-}<div class="alert alert-danger">{-"The url is mandatory"|translate-}</div>{-/if-}
      </div>
    </div>
   
    </div>
         
       
    <!-- email option end -->
    </div>

    
     {- if $item.id -}
  <button class="btn btn-default"  type="submit">{- "Modify"|translate -}</button>
  {- else -}
  <button class="btn btn-default"  type="submit">{- "Add"|translate -}</button>
  {- /if -}

  <a href="{-$url_back-}" class="btn btn-default">{- "Cancel"|translate -}</a> 
    
</form>

现在不要担心表格中的花括号，因为它使用了一些奇怪的聪明的改编（由我认识的某个人制作）。

我想这是一个长期阅读的问题：如何根据javascript中的html select标签中的选定选项生成输入。

感谢您抽出时间真正解决所有这些问题，如果您有任何疑问请再次询问，我真的必须完成这项工作。

编辑某人问了一句：这个表格在哪里？

它向一个名为links_edit.php的控制器发送信息，该控制器处理信息，我知道没有指定任何操作，但它默认为该控制器，因此它执行数据库查询和表单验证。

来自控制器部分的附加代码（这是我如何从控制器中的表单获取数据：

<?php
    $id       = $dbt->varGetFromInput('id');
    $store    = $dbt->varGetFromInput('store');
    $save     = $dbt->varGetFromInput('save');
    $is_type  = $dbt->varGetFromInput('is_type');
    ?>

从这里开始我可以做任何事情

Answer 1

尝试按照我的例子：

＆＃13;

＆＃13;

jQuery(document).ready(SwitchFormCtrl);

function SwitchFormCtrl($) {
  var self = this;
  
  var select = $('select[name="is_type"]');
  var offerFieldset = $('.choose.offer');
  var emailFieldset = $('.choose.email');

  self.showEmailFieldset = function() {
    return offerFieldset
      .fadeOut()
      .promise()
      .then(function() {
        return emailFieldset
          .fadeIn()
          .promise()
        ;
      })
    ;
  };
  

  self.showOfferFieldset = function() {
    return emailFieldset
      .fadeOut()
      .promise()
      .then(function() {
        return offerFieldset
          .fadeIn()
          .promise()
        ;
      })
    ;
  };
  
  select.change(function() {
    
    switch((this.value || '').toLowerCase()) {
      case "offer":
        self.showOfferFieldset();
        break;
        
      case "email":
        self.showEmailFieldset();
        break;
    }
    
  });
}

＆＃13;

.choose { margin: 5px; border: 1px solid green; padding: 5px; }
.choose.email { background: yellow; }
.choose.offer { background: cyan; }

/** hide both email and offer fieldset **/
.choose.offer,
.choose.email { display: none; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post" id="add" enctype="multipart/form-data" class="form-signin">
     <input type="hidden" name="id" value="{- $item.id -}" />
     <input type="hidden" name="save" value="1" />
     <input type="hidden" name="store" value="1" />
        <select name="is_type">
            <option value="choose">Choose option</option>
            <option value="offer">Offer</option>
            <option value="email">E-mail</option>
        </select>
    
    <div class="choose choose1">choose your option</div>
    <div class="choose offer">
        <!-- offer option start -->  
              
 
    <div class="form-group row">
      <label for="url" class="col-sm-4 control-label">{- "Url"|translate -} :</label>
      <div class="col-sm-8">
        <input type="text" class="form-control" id="url" name="url" value="{- $item.url|escape -}" size="50" />
        {-if $error.url-}<div class="alert alert-danger">{-"The url is mandatory"|translate-}</div>{-/if-}
      </div>
    </div>
    <div class="form-group row">
      <label for="name" class="col-sm-4 control-label">{- "Name"|translate -} :</label>
      <div class="col-sm-8">
        <input type="text" class="form-control" id="name" name="name" value="{- $item.name|escape -}" size="50" />
        {-if $error.name-}<div class="alert alert-danger">{-"The name is mandatory"|translate-}</div>{-/if-}
      </div>
    </div>
    <div class="form-group row">
      <label for="list" class="col-sm-4 control-label">{- "E-mail list:"|translate -} :</label>
      <div class="col-sm-8">
          <textarea name="list" rows="10" style="width:100%">{- $item.data|escape -}</textarea>
        {-if $error.list-}<div class="alert alert-danger">{-"Insert at least one e-mail address"|translate-}</div>{-/if-}
      </div>
    </div>


        
        <!-- offer option end -->
    
    </div>
    <div class="choose email">
    <!-- email option start -->
      
      
    <div class="form-group row">
      <label for="email" class="col-sm-4 control-label">{- "E-mail"|translate -} :</label>
      <div class="col-sm-8">
        <input type="text" class="form-control" id="url" name="email" value="{- $item.url|escape -}" size="50" />
        {-if $error.url-}<div class="alert alert-danger">{-"The E-mail is mandatory"|translate-}</div>{-/if-}
      </div>
    </div>   
    <div class="form-group row">
      <label for="url" class="col-sm-4 control-label">{- "Url"|translate -} :</label>
      <div class="col-sm-8">
        <input type="text" class="form-control" id="url" name="url1" value="{- $item.url|escape -}" size="50" />
        {-if $error.url-}<div class="alert alert-danger">{-"The url is mandatory"|translate-}</div>{-/if-}
      </div>
    </div>
   
    </div>
         
       
    <!-- email option end -->
    </div>

    
     {- if $item.id -}
  <button class="btn btn-default"  type="submit">{- "Modify"|translate -}</button>
  {- else -}
  <button class="btn btn-default"  type="submit">{- "Add"|translate -}</button>
  {- /if -}

  <a href="{-$url_back-}" class="btn btn-default">{- "Cancel"|translate -}</a> 
    
</form>

＆＃13;

＆＃13;

＆＃13;