2017-08-25 293 views
-1

说实话,我从未在今天之前触及Javascript。在基本搜索中,我看到一些脚本使用了更改功能,但样本看起来非常具体(使用.indexOf,更改的数字/文本框在此不适用)。根据下拉选项选择下拉选项

jsfiddle.net/701s3dgp/

您可以忽略的存在的代码。基本上我在寻找的是1(疾病)变为是时,6选项变为患者,如果6(poster_type)值=患者,则选择7作为是。

如果有人能通过改变函数来引导我,那也可以。

$('select>option[value="Neutral"]').prop('selected', true); 
 
$('select>option[value="No"]').prop('selected', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html><html><head><title>HIT</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><script type='text/javascript' src='https://s3.amazonaws.com/mturk-public/externalHIT_v1.js'></script></head><body><form name="mturk_form" method="post" id="mturk_form" action="https://www.mturk.com/mturk/externalSubmit"><input type="hidden" value="" name="assignmentId" id="assignmentId" /><style type="text/css">.surveyLabel { 
 
\t font-family: Georgia, Garamond, serif; 
 
\t font-size: 16px; 
 
\t line-height: 26px; 
 
\t font-weight: bold; 
 
\t color: white; 
 
\t text-align: center; 
 
\t background-color: rgb(66, 139, 202); 
 
} 
 

 
.postHead { 
 
\t width: 90%; 
 
\t position: fixed; 
 
\t left: 30%; 
 
\t margin-left: -24%; 
 
\t z-index: 1000; 
 
\t padding: 5px; 
 
\t font-family: Verdana, Geneva, sans-serif; 
 
\t color: #333333; 
 
\t font-size: 0.9em; 
 
} 
 

 
.panelBodyFloat { 
 
\t height: 100px; 
 
\t width: 100%; 
 
\t border: 1px solid rgb(204, 204, 204); 
 
\t align-content: center; 
 
\t overflow: auto; 
 
} 
 

 
.instruction { 
 
\t width: 90%; 
 
\t left: 30%; 
 
\t margin-left: -24%; 
 
\t position: relative; 
 
\t z-index: -1; 
 
\t margin-bottom: 15px; 
 
\t margin-top: 200px; 
 
\t padding: 10px; 
 
\t font-family: Verdana, Geneva, sans-serif; 
 
\t color: #333333; 
 
\t font-size: 0.9em; 
 
} 
 

 
h4.surveyHeader { 
 
\t font-family: Georgia, Garamond, serif; 
 
\t font-size: 16px; 
 
\t line-height: 26px; 
 
\t font-weight: bold; 
 
\t color: white; 
 
\t text-align: center; 
 
\t background-color: rgb(66, 139, 202); 
 
} 
 
</style> 
 
<!-- Bootstrap v3.0.3 --> 
 
<link href="https://s3.amazonaws.com/mturk-public/bs30/css/bootstrap.min.css" rel="stylesheet" /> 
 
<p>&nbsp;</p> 
 

 
<section class="postHead" id="GSKSurvey" style="align-content: center;"> 
 
<div class="panel panel-primary"> 
 
<div class="panel-heading"><b>Post</b></div> 
 

 
<div class="panelBodyFloat"> 
 
<p>mewilling I agree, mewilling. I would love to have a doctor or researcher post on our website. Maybe [FirstName] could work on this. pj</p> 
 
</div> 
 
</div> 
 
</section> 
 
<!-- Instructions --> 
 

 
<p>&nbsp;</p> 
 

 
<p>&nbsp;</p> 
 

 
<p>&nbsp;</p> 
 

 
<p>&nbsp;</p> 
 

 
<p>&nbsp;</p> 
 

 
<p>&nbsp;</p> 
 

 
<p>&nbsp;</p> 
 

 
<p>&nbsp;</p> 
 

 
<section class="container" id="Survey"> 
 
<div class="row col-xs-12 col-md-12"> 
 
<div class="panel panel-primary"> 
 
<div class="panel-heading surveyLabel"><b>Instructions</b></div> 
 

 
<div class="panel-body"> 
 
<p>Please answer the following questions based on the post shown. Each post should take about 1-3 minutes.</p> 
 

 
<p><b>Please note:</b> Blank submissions, or not fully answering questions, will result in rejection of the HIT and the worker being blocked from future HITS. Thank you for your hard work and happy turking!</p> 
 

 
<p><b>Contact us:</b> [email protected]</p> 
 
</div> 
 
</div> 
 
</div> 
 
</section> 
 

 
<p>&nbsp;</p> 
 

 
<section class="container" id="SurveyContinue"> 
 
<div> 
 
<h4 class="surveyHeader">Questions</h4> 
 

 
<section> 
 
<fieldset> 
 
<p><strong>1. Does the post specifically mention COPD or Asthma in a medically relevant context?</strong></p> 
 

 
<p><b>COPD Definition:</b> Chronic obstructive pulmonary disease (COPD) is a lung disease characterized by chronic obstruction of lung airflow that interferes with normal breathing and is not fully reversible. If the post mentions COPD or asthma specifically, then answer "Yes", otherwise, answer "No".</p> 
 

 
<p><b>Answer this question, even if it is "No", otherwise your HIT will be rejected!</b></p> 
 

 
<p><select class="form-control" name="disease"><option value="-1">- Please Select -</option><option value="0">No</option><option value="1">Yes</option> </select></p> 
 
</fieldset> 
 

 
<fieldset> 
 
<p><strong>Are any of the following products mentioned?</strong></p> 
 

 
<p>2. Anoro<br /> 
 
<select class="form-control" name="anoro"><option selected="selected" value="0">No</option><option value="1">Yes</option> </select></p> 
 

 
<p>3. Breo<br /> 
 
<select class="form-control" name="breo"><option selected="selected" value="0">No</option><option value="1">Yes</option> </select></p> 
 

 
<p>4. Incruse<br /> 
 
<select class="form-control" name="incruse"><option selected="selected" value="0">No</option><option value="1">Yes</option> </select></p> 
 

 
<p>5. Advair<br /> 
 
<select class="form-control" name="advair"><option selected="selected" value="0">No</option><option value="1">Yes</option> </select></p> 
 
</fieldset> 
 

 
<hr /> 
 
<h3>If <i><u>all the answers</u></i> for questions 1-5 were NO, please skip the remaining questions, go to the bottom of the page and click submit. Otherwise, please answer the remaining questions fully before submitting.</h3> 
 

 
<hr /> 
 
<fieldset> 
 
<p><strong>6. Who is speaking in the post? </strong></p> 
 

 
<p><select class="form-control" name="poster_type"><option selected="selected" value="Unknown">Unknown</option><option value="Patient">Patient</option><option value="HCP">Health care provider (HCP)</option><option value="Friend_Family">Friend or Family Member</option> </select></p> 
 

 
<p><b>HCP Definition:</b> An HCP includes doctors, nurses, pharmacists and other professional health care providers.</p> 
 
</fieldset> 
 

 
<hr /> 
 
<fieldset> 
 
<p><strong>7. If the patient is speaking, are they talking about their own experience in the post? </strong></p> 
 

 
<p><b>Hint:</b> Yes if poster talks about own health state, not about a third person or another patient. No if poster is talking about someone other than themselves or unknown.</p> 
 

 
<p><select class="form-control" name="patient_exp"><option selected="selected" value="-1">- Please Select -</option><option value="0">No</option><option value="1">Yes</option> </select></p> 
 
</fieldset> 
 

 
<hr /> 
 
<fieldset> 
 
<p><strong>8. Is the patient CURRENTLY being treated using Anoro, Breo, Incruse or Advair? </strong></p> 
 

 
<p><select class="form-control" name="current_tx"><option selected="selected" value="-1">- Please Select -</option><option value="No">No or Unknown</option><option value="Asthma">Yes, Asthma</option><option value="COPD">Yes, COPD</option><option value="Other">Yes, Other/Unspecified</option> </select></p> 
 
</fieldset> 
 

 
<hr /> 
 
<fieldset> 
 
<p><strong>9. Does the post mention sentiment regarding CURRENT treatment with Anoro, Breo, Incruse or Advair? </strong></p> 
 

 
<p><b>Sentiment:</b> Sentiment: Does the post reflect positive, negative or neutral feedback about being treated with Anoro, Breo, Incruse or Advair? If you are unsure about the category for sentiment, select neutral. If there is no sentiment expressed, select neutral</p> 
 

 
<p><select class="form-control" name="current_tx_sentiment"><option selected="selected" value="-1">- Please Select -</option><option value="Positive">Positive</option><option value="Negative">Negative</option><option value="Neutral">Neutral</option><option value="Both">Both Positive and Negative</option> </select></p> 
 
</fieldset> 
 

 
<hr /> 
 
<fieldset> 
 
<p><strong>10. Is the patient anticipating FUTURE treatment using Anoro, Breo, Incruse or Advair? </strong></p> 
 

 
<p><select class="form-control" name="future_tx"><option selected="selected" value="-1">- Please Select -</option><option value="No">No or Unknown</option><option value="Asthma">Yes, Asthma</option><option value="COPD">Yes, COPD</option><option value="Other">Yes, Other/Unspecified</option> </select></p> 
 
</fieldset> 
 

 
<hr /> 
 
<fieldset> 
 
<p><strong>11. Does the post mention sentiment regarding future treatment with Anoro, Breo, Incruse or Advair? </strong></p> 
 

 
<p><b>Sentiment:</b> Sentiment: Does the post reflect positive, negative or neutral feedback about anticipated treatment with Anoro, Breo, Incruse or Advair? If you are unsure about the category for sentiment, select neutral. If there is no sentiment expressed, select neutral.</p> 
 

 
<p><select class="form-control" name="future_tx_sentiment"><option selected="selected" value="-1">- Please Select -</option><option value="Positive">Positive</option><option value="Negative">Negative</option><option value="Neutral">Neutral</option><option value="Both">Both Positive and Negative</option> </select></p> 
 
</fieldset> 
 

 
<hr /> 
 
<fieldset> 
 
<p><strong>12. Is there any sentiment expressed about any topic? </strong></p> 
 

 
<p><b>Sentiment:</b> Do not duplicate responses in this question if another question has captured the sentiment. Does the post reflect positive, negative or neutral feedback about any topic? If you are unsure about the category for sentiment, select neutral. If there is no sentiment expressed, select neutral</p> 
 

 
<p><select class="form-control" name="post_sentiment"><option selected="selected" value="-1">- Please Select -</option><option value="Positive">Positive</option><option value="Negative">Negative</option><option value="Neutral">Neutral</option><option value="Both">Both Positive and Negative</option> </select></p> 
 
</fieldset> 
 

 
<hr /></section> 
 
</div> 
 
</section> 
 

 
<p>&nbsp;</p> 
 

 
<p>&nbsp;</p> 
 

 
<p>&nbsp;</p> 
 

 
<p>&nbsp;</p> 
 

 
<p>&nbsp;</p> 
 
<p class="text-center"><input type="submit" id="submitButton" class="btn btn-primary" value="Submit" /></p></form><script language="Javascript">turkSetAssignmentID();</script></body></html>

回答

0

代码和解释如下

所以,代码说,每当病情下拉改变 如果其选定的值为“1”
将poster_type下拉列表更改为Patient。 将patient_exp下拉列表更改为“1” 其他 将poster_type下拉列表更改为Unknown。 改变patient_exp下拉为“0”

$("select[name='disease']").change(function(){ 
     if($("select[name='disease']").val() == "1"){ 
      $("select[name='poster_type']").val("Patient"); 
      $("select[name='patient_exp']").val("1"); 
     } 
     else 
     { 
      $("select[name='poster_type']").val("Unknown"); 
      $("select[name='patient_exp']").val("0"); 
     } 
    }); 

对于poster_type下拉,的值变化 如果在poster_type电流选定值是patient_exp下拉的病人 设定值“1” patient_exp的 别的 设定值下拉到“0”

$("select[name='poster_type']").change(function(){ 

     if($("select[name='poster_type']").val() == "Patient") 
      { 
      $("select[name='patient_exp']").val("1"); 
      } 
      else 
      { 
      $("select[name='patient_exp']").val("0"); 
      } 
     }); 
+0

谢谢!这正是我想要做的。我很感激帮助。 –

0

基本上你需要绑定到更改事件:

$('select[name=disease]').on('change', function(e){ 
    // here the user have changed the value 
}); 

然后你可以用VAL()获取当前值:

$('select[name=disease]').val(); 
// yes or no 

瓦尔是还有您用来更改输入值的方法:

$('input[name=myInput]').val('newVal'); 

所以,你正在寻找的东西是这样的:

$('select[name=disease]').on('change', function(e){ 
    if($('select[name=disease]').val() === 'yes'){ 
     $('input[name=myInput]').val('my-new-value'); 
    } 
}); 
+0

感谢您浏览更改代码。它有很大帮助! :) –